Есть ли способ поймать событие кнопки возврата в JavaScript?

Question

Есть ли способ реагировать на нажатие кнопки "Назад" (или нажатие клавиши Backspace) в javascript, когда изменяется только хэш местоположения? То есть когда браузер не связывается с сервером или не перезагружает страницу.

Answer 1

Использовать hashchange событие:

window.addEventListener("hashchange", function(e) {
  // ...
})

Если вам нужна поддержка старых браузеров, проверьте hashChange Раздел "Событие" на вики-странице Modernizr HTML5 Cross Browser Polyfills.

Answer 2

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

Я тестировал в IE, FF, Chrome и Safari и все работает. У меня есть решение, основанное на iframes без необходимости постоянного опроса, в IE и FF, однако, из-за ограничений в других браузерах, хэш местоположения используется в Safari.

Answer 3

Я сделал забавный хак, чтобы решить эту проблему, к моему удовлетворению. У меня есть AJAX-сайт, который загружает контент динамически, затем изменяет window.location.hash, и у меня был код для запуска на $(document).ready(), чтобы проанализировать хэш и загрузить соответствующий раздел. Дело в том, что я был совершенно доволен кодом загрузки моего раздела для навигации, но хотел добавить способ перехвата кнопок браузера назад и вперед, которые изменяют расположение окна, но не мешают моим текущим процедурам загрузки страниц, где я манипулирую window.location и опроса window.location с постоянными интервалами не могло быть и речи.

В итоге я создал объект как таковой:

var pageload = {
    ignorehashchange: false,
    loadUrl: function(){
        if (pageload.ignorehashchange == false){
            //code to parse window.location.hash and load content
        };
    }
};

Затем я добавил строку в скрипт своего сайта, чтобы запустить pageload.loadUrl функция после события hashchange, как таковая:

window.addEventListener("hashchange", pageload.loadUrl, false);

Затем в любое время я хочу изменить window.location.hash не вызывая эту процедуру загрузки страницы, я просто добавляю следующую строку перед каждым window.location.hash = линия:

pageload.ignorehashchange = true;

и затем следующую строку после каждой строки изменения хеша:

setTimeout(function(){pageload.ignorehashchange = false;}, 100);

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

Answer 4

Проверьте history.js. Существует событие изменения состояния HTML 5, и вы можете его прослушать.

Answer 5

Вы смотрели на это? http://developer.yahoo.com/yui/history/

Answer 6

onLocationChange также может быть полезным. Не уверен, что это вещь, предназначенная только для Mozilla.