Кнопка возврата браузера и кнопка закрытия браузера javascript [дубликат]

Question

Кнопка возврата браузера и кнопка закрытия браузера javascript [дубликат]

Я получал эту ошибку из-за чего-то еще более простого (можно даже сказать тривиально). Я не установил модуль pytest. Поэтому простой apt install python-pytest исправил это для меня.

'pytest' был бы указан в setup.py как тестовая зависимость. Убедитесь, что вы также установили требования к тестированию.

119

javascript asp.net

задан Xarus 12 September 2014 в 11:50

9 ответов

 <input style="display:none" id="__pageLoaded" value=""/>


 $(document).ready(function () {
        if ($("#__pageLoaded").val() != 1) {

            $("#__pageLoaded").val(1);


        } else {
            shared.isBackLoad = true;
            $("#__pageLoaded").val(1);  

            // Call any function that handles your back event

        }
    });

0

ответ дан Ashwin 26 August 2018 в 05:56

1

– Ashwin 17 July 2018 в 19:25

Вы можете попробовать обработчик событий popstate , например:

window.addEventListener('popstate', function(event) {
    // The popstate event is fired each time when the current history entry changes.

    var r = confirm("You pressed a Back button! Are you sure?!");

    if (r == true) {
        // Call Back button programmatically as per user confirmation.
        history.back();
        // Uncomment below line to redirect to the previous page instead.
        // window.location = document.referrer // Note: IE11 is not supporting this.
    } else {
        // Stay on the current page.
        history.pushState(null, null, window.location.pathname);
    }

    history.pushState(null, null, window.location.pathname);

}, false);

Примечание: для получения наилучших результатов вы должны загрузить этот код только на определенных страницах, где вы хотите для реализации логики во избежание любых других неожиданных проблем.

Событие popstate запускается каждый раз, когда изменяется текущая запись истории (пользователь переходит в новое состояние). Это происходит, когда пользователь нажимает кнопки «Назад / Вперед» браузера или когда программно вызывается методы history.back(), history.forward(), history.go().

event.state является свойством события, равным истории state.

Для синтаксиса jQuery оберните его (чтобы добавить даже приемник после того, как документ готов):

(function($) {
  // Above code here.
})(jQuery);

См. также: window.onpopstate при загрузке страницы

См. также примеры на странице Single-Pages Apps и HTML5 pushState :

<script>
// jQuery
$(window).on('popstate', function (e) {
    var state = e.originalEvent.state;
    if (state !== null) {
        //load content with ajax
    }
});

// Vanilla javascript
window.addEventListener('popstate', function (e) {
    var state = e.state;
    if (state !== null) {
        //load content with ajax
    }
});
</script>

Это должно быть совместимо с Chrome 5+, Firefox 4+, IE 10+, Safari 6+, Opera 11.5+ и т. Д.

45

ответ дан Community 26 August 2018 в 05:56

1

– Xarus 9 May 2016 в 12:08
2

– lowtechsun 28 May 2016 в 01:04
3

– coder.in.me 28 April 2017 в 04:21
4

– FAjir 15 November 2017 в 17:10
5

– msqar 21 February 2018 в 18:44

document.mouseover не работает для IE и FireFox. Однако я пробовал это:

$(document).ready(function () {
  setInterval(function () {
    var $sample = $("body");
    if ($sample.is(":hover")) {
      window.innerDocClick = true;
    } else {
      window.innerDocClick = false;
    }
  });

});

window.onhashchange = function () {
  if (window.innerDocClick) {
    //Your own in-page mechanism triggered the hash change
  } else {
    //Browser back or forward button was pressed
  }
};

Это работает для Chrome и IE, а не для FireFox. Все еще работаю над тем, чтобы получить FireFox. Любой простой способ обнаружения щелчка мыши назад / вперед браузера приветствуется, особенно не в JQuery, а также в AngularJS или в простом Javascript.

1

ответ дан Dhruv Gupta 26 August 2018 в 05:56

Браузер: https://jsfiddle.net/Limitlessisa/axt1Lqoz/

Для мобильного управления: https://jsfiddle.net/Limitlessisa/axt1Lqoz/ show /

$(document).ready(function() {
  $('body').on('click touch', '#share', function(e) {
    $('.share').fadeIn();
  });
});

// geri butonunu yakalama
window.onhashchange = function(e) {
  var oldURL = e.oldURL.split('#')[1];
  var newURL = e.newURL.split('#')[1];

  if (oldURL == 'share') {
    $('.share').fadeOut();
    e.preventDefault();
    return false;
  }
  //console.log('old:'+oldURL+' new:'+newURL);
}

.share{position:fixed; display:none; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.8); color:white; padding:20px;

<!DOCTYPE html>
<html>

<head>
    <title>Back Button Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</head>

<body style="text-align:center; padding:0;">
    <a href="#share" id="share">Share</a>
    <div class="share" style="">
        <h1>Test Page</h1>
        <p> Back button press please for control.</p>
    </div>
</body>

</html>

2

ответ дан Limitless isa 26 August 2018 в 05:56

1

– Xarus 1 November 2016 в 10:53
2

– skwny 27 January 2017 в 19:12

Я долгое время боролся с этим требованием и принял некоторые из вышеперечисленных решений, чтобы реализовать его. Тем не менее, я наткнулся на наблюдение и, похоже, работает в браузерах Chrome, Firefox и Safari + Android и iPhone

На загрузке страницы:

window.history.pushState({page: 1}, "", "");

window.onpopstate = function(event) {

  // "event" object seems to contain value only when the back button is clicked
  // and if the pop state event fires due to clicks on a button
  // or a link it comes up as "undefined" 

  if(event){
    // Code to handle back button or prevent from navigation
  }
  else{
    // Continue user action through link or button
  }
}

Дайте мне знать, если это поможет , Если я что-то упустил, я буду рад понять.

7

ответ дан Nelson Yeung 26 August 2018 в 05:56

1

– Birowsky 13 June 2018 в 17:06

Я решил его, отслеживая исходное событие, вызвавшее hashchange (будь то салфетка, щелчок или колесо), чтобы событие не было ошибочно принято за простую посадку на странице, и использование дополнительного флага в каждом из моих привязок событий. Браузер не будет устанавливать флаг снова на false при нажатии кнопки «Назад»:

var evt = null,
canGoBackToThePast = true;

$('#next-slide').on('click touch', function(e) {
    evt = e;
    canGobackToThePast = false;
    // your logic (remember to set the 'canGoBackToThePast' flag back to 'true' at the end of it)
}

0

ответ дан Niccolò Mineo 26 August 2018 в 05:56

Я попробовал вышеуказанные варианты, но ни один из них не работает для меня. Вот решение

if(window.event)
   {
        if(window.event.clientX < 40 && window.event.clientY < 0)
        {
            alert("Browser back button is clicked...");
        }
        else
        {
            alert("Browser refresh button is clicked...");
        }
    }

См. Эту ссылку http://www.codeproject.com/Articles/696526/Solution-to-Browser-Back-Button-Click-Event-Handli для более подробной информации

-13

ответ дан Sures Ramar 26 August 2018 в 05:56

1

– James Wong 8 August 2017 в 03:42
2

– msqar 21 February 2018 в 18:47

Вот мое занятие. Предполагается, что при изменении URL-адреса, но не обнаружено клика внутри обнаруженного document, это браузер назад (да или вперед). Пользовательский щелчок сбрасывается через 2 секунды, чтобы сделать эту работу на страницах, загружающих контент через Ajax:

(function(window, $) {
  var anyClick, consoleLog, debug, delay;
  delay = function(sec, func) {
    return setTimeout(func, sec * 1000);
  };
  debug = true;
  anyClick = false;
  consoleLog = function(type, message) {
    if (debug) {
      return console[type](message);
    }
  };
  $(window.document).click(function() {
    anyClick = true;
    consoleLog("info", "clicked");
    return delay(2, function() {
      consoleLog("info", "reset click state");
      return anyClick = false;
    });
  });
  return window.addEventListener("popstate", function(e) {
    if (anyClick !== true) {
      consoleLog("info", "Back clicked");
      return window.dataLayer.push({
        event: 'analyticsEvent',
        eventCategory: 'test',
        eventAction: 'test'
      });
    }
  });
})(window, jQuery);

2

ответ дан TomTom101 26 August 2018 в 05:56

Другие вопросы по тегам:

javascript asp.net

Похожие вопросы:

score 116 · Accepted Answer

(Примечание: в соответствии с обратной связью Шарки я включил код для обнаружения обратных пространств)

Итак, я часто видел эти вопросы на SO и недавно столкнулся с проблемой управления кнопкой возврата функциональность. После нескольких дней поиска наилучшего решения для моего приложения (Single-страница с Hash Navigation), я придумал простую, кросс-браузерную, библиотечную систему для обнаружения кнопки «Назад».

Большинство людей рекомендуют использовать:

window.onhashchange = function() {
 //blah blah blah
}

Однако эта функция также вызывается, когда пользователь использует элемент in-page, который изменяет хэш местоположения. Не лучший пользовательский интерфейс, когда пользователь нажимает, а страница идет назад или вперед.

Чтобы дать вам общую схему моей системы, я заполняю массив предыдущими хэшами, когда мой пользователь перемещается по интерфейс. Это выглядит примерно так:

function updateHistory(curr) {
    window.location.lasthash.push(window.location.hash);
    window.location.hash = curr;
}

Довольно прямо. Я делаю это, чтобы обеспечить кросс-браузерную поддержку, а также поддержку старых браузеров. Просто передайте новый хэш функции, и он сохранит его для вас, а затем изменит хэш (который затем помещается в историю браузера).

Я также использую кнопку на странице, которая перемещает пользователя между страницами с помощью массива lasthash. Это выглядит так:

function goBack() {
    window.location.hash = window.location.lasthash[window.location.lasthash.length-1];
    //blah blah blah
    window.location.lasthash.pop();
}

Итак, это переведет пользователя на последний хеш и удалит последний хэш из массива (у меня нет кнопки прямого доступа прямо сейчас).

Итак. Как определить, использовал ли пользователь мою кнопку возврата на странице или кнопку браузера?

Сначала я посмотрел на window.onbeforeunload, но безрезультатно - это вызывается только в том случае, пользователь будет менять страницы. Это не происходит в одностраничном приложении с использованием хэш-навигации.

Итак, после некоторого дополнительного копирования я увидел рекомендации по попытке установить переменную флага. Проблема с этим в моем случае заключается в том, что я попытаюсь установить его, но поскольку все будет асинхронным, оно не всегда будет установлено во времени для оператора if в изменении хэша. .onMouseDown не всегда вызывался щелчком, а добавление его в onclick никогда не вызывало бы его достаточно быстро.

Это когда я начал смотреть на разницу между document и window. Моим окончательным решением было установить флаг с помощью document.onmouseover и отключить его с помощью document.onmouseleave.

Что происходит, когда мышь пользователя находится внутри области документа (читайте: отображаемая страница, но исключая рама браузера), мое значение boolean равно true. Как только мышь покинет область документа, логическое значение сбрасывается на false.

Таким образом, я могу изменить свой window.onhashchange на:

window.onhashchange = function() {
    if (window.innerDocClick) {
        window.innerDocClick = false;
    } else {
        if (window.location.hash != '#undefined') {
            goBack();
        } else {
            history.pushState("", document.title, window.location.pathname);
            location.reload();
        }
    }
}

обратите внимание на проверку для #undefined. Это связано с тем, что, если в моем массиве нет истории, она возвращает undefined. Я использую это, чтобы спросить пользователя, хотят ли они уйти, используя событие window.onbeforeunload.

Итак, короче говоря, и для людей, которые не обязательно используют кнопку возврата на странице или массив, чтобы сохраните историю:

document.onmouseover = function() {
    //User's mouse is inside the page.
    window.innerDocClick = true;
}

document.onmouseleave = function() {
    //User's mouse has left the page.
    window.innerDocClick = false;
}

window.onhashchange = function() {
    if (window.innerDocClick) {
        //Your own in-page mechanism triggered the hash change
    } else {
        //Browser back button was clicked
    }
}

И вот она у вас есть. простой, трехчастный способ обнаружения использования кнопки обратной связи и элементов на странице в отношении хеш-навигации.

EDIT:

Чтобы гарантировать, что пользователь не использует обратное пространство для вы можете включить следующее: (Спасибо @thetoolman на этот Вопрос ):

$(function(){
    /*
     * this swallows backspace keys on any non-input element.
     * stops backspace -> back
     */
    var rx = /INPUT|SELECT|TEXTAREA/i;

    $(document).bind("keydown keypress", function(e){
        if( e.which == 8 ){ // 8 == backspace
            if(!rx.test(e.target.tagName) || e.target.disabled || e.target.readOnly ){
                e.preventDefault();
            }
        }
    });
});