Обнаружение кнопки возврата в браузере

Мне нужно определить, нажала ли пользователь кнопку "Назад" или нет. Для этого я использую

window.onbeforeunload = function (e) {
}

Он работает, если пользователь нажимает кнопку "Назад". Но это событие также запускается, если пользователь нажимает F5 или перезагрузить браузер. Как это исправить?

Ответ 1

Итак, что касается AJAX...

Отключение при использовании большинства веб-приложений, использующих AJAX для навигации по определенным частям страницы, является ОГРОМНОЙ проблемой. Я не согласен с тем, что "отключить кнопку означает, что вы делаете что-то не так", и на самом деле разработчики в разных аспектах давно столкнулись с этой проблемой. Здесь мое решение:

window.onload = function () {
    if (typeof history.pushState === "function") {
        history.pushState("jibberish", null, null);
        window.onpopstate = function () {
            history.pushState('newjibberish', null, null);
            // Handle the back (or forward) buttons here
            // Will NOT handle refresh, use onbeforeunload for this.
        };
    }
    else {
        var ignoreHashChange = true;
        window.onhashchange = function () {
            if (!ignoreHashChange) {
                ignoreHashChange = true;
                window.location.hash = Math.random();
                // Detect and redirect change here
                // Works in older FF and IE9
                // * it does mess with your hash symbol (anchor?) pound sign
                // delimiter on the end of the URL
            }
            else {
                ignoreHashChange = false;   
            }
        };
    }
}

Насколько я мог сказать, что это работает через хром, firefox, еще не протестировал IE.

Ответ 2

Попробуйте это (если браузер не поддерживает "onbeforeunload" ):

jQuery(document).ready(function($) {

  if (window.history && window.history.pushState) {

    $(window).on('popstate', function() {
      var hashLocation = location.hash;
      var hashSplit = hashLocation.split("#!/");
      var hashName = hashSplit[1];

      if (hashName !== '') {
        var hash = window.location.hash;
        if (hash === '') {
          alert('Back button was pressed.');
        }
      }
    });

    window.history.pushState('forward', null, './#forward');
  }

});

Ответ 3

Лучший способ, который я знаю

         window.onbeforeunload = function (e) {
            var e = e || window.event;
            var msg = "Do you really want to leave this page?"

            // For IE and Firefox
            if (e) {
                e.returnValue = msg;
            }

            // For Safari / chrome
            return msg;
         };

Ответ 4

Так как кнопка "Назад" является функцией браузера, может быть сложно изменить функциональность по умолчанию. Однако есть некоторые проблемы. Взгляните на эту статью:

http://www.irt.org/script/311.htm

Как правило, необходимость отключения кнопки "назад" является хорошим индикатором проблемы/недостатка программирования. Я хотел бы найти альтернативный метод, например, установить переменную сеанса или файл cookie, который сохраняет, была ли форма уже отправлена.

Ответ 5

Я предполагаю, что вы пытаетесь справиться с навигацией Ajax и не пытаетесь помешать своим пользователям использовать кнопку "Назад", которая нарушает практически все принципы разработки пользовательского интерфейса.

Вот некоторые возможные решения: История JQuery Salajax Лучшая кнопка Ajax Back

Ответ 6

Я обнаруживаю кнопку "назад" следующим образом:

window.onload = function () {
if (typeof history.pushState === "function") {
    history.pushState("jibberish", null, null);
    window.onpopstate = function () {
        history.pushState('newjibberish', null, null);
        // Handle the back (or forward) buttons here
        // Will NOT handle refresh, use onbeforeunload for this.
    };
}

Это работает, но я должен создать файл cookie в Chrome, чтобы обнаружить, что я впервые попал на страницу, потому что, когда я вхожу на страницу без контроля с помощью cookie, браузер делает обратное действие без щелчка на любой кнопке.

if (typeof history.pushState === "function"){
history.pushState("jibberish", null, null); 
window.onpopstate = function () {
    if ( ((x=usera.indexOf("Chrome"))!=-1) && readCookie('cookieChrome')==null ) 
    {
        addCookie('cookieChrome',1, 1440);      
    } 
    else 
    {
        history.pushState('newjibberish', null, null);  
    }
};

}

И ОЧЕНЬ ВАЖНО, history.pushState("jibberish", null, null); дублирует историю браузера.

Кто-нибудь знает, кто может это исправить?