На окне.местоположение.сдача гашиша?

Я использую Ajax и хэш для навигации.

есть ли способ проверить, если window.location.hash изменился?

http://example.com/blah#123 к http://example.com/blah#456

он работает, если я проверяю его при загрузке документа.

но если у меня есть навигация на основе #hash, она не работает, когда я нажимаю кнопку "Назад" в браузере (поэтому я перескакиваю с blah#456 на blah#123).

он отображается внутри поля адреса, но я не могу поймать его с помощью JavaScript.

13 ответов


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


обновление, чтобы сохранить этот ответ свежим:

Если вы используете jQuery (который сегодня должен быть несколько для большинства), то хорошим решением является использование абстракции, которую jQuery дает вам, используя свою систему событий для прослушивания событий hashchange на объекте window.

$(window).on('hashchange', function() {
  //.. work ..
});

хорошая вещь здесь - вы можете написать код, который не должен даже беспокоиться о поддержке hashchange, однако вам нужно сделать некоторую магию в виде несколько менее известной функции jQuery специальные мероприятия jQuery.

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

в этом коде установки вы можете проверить наличие собственной поддержки браузера, и если браузер изначально не реализует это, вы можете настроить один таймер для опроса изменений и вызвать событие jQuery.

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


в HTML5 задает hashchange событие. Это событие сейчас поддерживается всеми современными браузерами. Поддержка была добавлена в следующих версиях браузера:

  • Internet Explorer 8
  • Firefox 3.6
  • Chrome 5
  • сафари 5
  • Опера 10.6

обратите внимание, что в случае Internet Explorer 7 и Internet Explorer 9 if statment даст true (для "onhashchange" в windows), но window.onhashchange никогда не будет срабатывать, поэтому лучше хранить хэш и проверять его через каждые 100 миллисекунд независимо от того, изменен он или нет для всех версий Internet Explorer.

    if (("onhashchange" in window) && !($.browser.msie)) {
         window.onhashchange = function () {
              alert(window.location.hash);
         }
         // Or $(window).bind( 'hashchange',function(e) {
         //       alert(window.location.hash);
         //   });
    }
    else {
        var prevHash = window.location.hash;
        window.setInterval(function () {
           if (window.location.hash != prevHash) {
              prevHash = window.location.hash;
              alert(window.location.hash);
           }
        }, 100);
    }

изменить - Начиная с jQuery 1.9, $.browser.msie не поддерживается. Источник: http://api.jquery.com/jquery.browser/


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

  • Как сказано в оригинальном вопросе, если вы перейдете со страницы a.html#b к a.html#c, а затем нажмите кнопку "Назад", браузер не знает, что страница изменилась. Позвольте мне сказать это на примере: окна.местоположение.хреф будет "а".html#c', независимо от того, находитесь ли вы в a.html#b или a.html#c.

  • вообще-то, a.html#b и a.html#c хранятся в истории только если элементы '' и '' существовали ранее на странице.

  • однако, если вы помещаете iframe внутри страницы, перейдите от a.html#b к a.html#c в этом iframe, а затем нажмите кнопку "Назад", iframe.contentWindow.документ.местоположение.href меняется, как и ожидалось.

  • Если вы используете документ.домен=что-то ' в вашем коде, то вы не можете получить доступ к iframe.contentWindow.документ.open ()' (и многие История менеджеров делает это)

Я знаю, что это не настоящий ответ, но, возможно, IE-History notes кому-то полезны.


Firefox имеет событие onhashchange с 3.6. См.


Бен Альман имеет большой плагин jQuery для работы с этим:http://benalman.com/projects/jquery-hashchange-plugin/

Если вы не используете jQuery, это может быть интересная ссылка препарировать.


вы можете легко реализовать observer (метод "watch") в свойстве" hash "окна".расположение " объект.

Firefox имеет свою собственная реализация для просмотра изменений объекта, но если вы используете другую реализацию (например,следите за изменениями свойств объекта в JavaScript) - для других браузеров это сделает трюк.

код будет выглядеть так:

window.location.watch(
    'hash',
    function(id,oldVal,newVal){
        console.log("the window's hash value has changed from "+oldval+" to "+newVal);
    }
);

после этого вы можете испытать это:

var myHashLink = "home";
window.location = window.location + "#" + myHashLink;

и, конечно, это вызовет вашу функцию наблюдателя.


достойную реализацию можно найти в http://code.google.com/p/reallysimplehistory/. Единственная (но также) проблема и ошибка: в Internet Explorer изменение хэша местоположения вручную сбросит весь стек истории (это проблема браузера, и она не может быть решена).

Примечание, Internet Explorer 8 поддерживает событие" hashchange", и поскольку он становится частью HTML5, вы можете ожидать, что другие браузеры догонят.


я использовал это в приложении react, чтобы заставить URL-адрес отображать разные параметры в зависимости от того, какой вид был у пользователя.

Я смотрел параметр хэша, используя

window.addEventListener('hashchange', doSomethingWithChangeFunction());

затем

doSomethingWithChangeFunction () { 
    // Get new hash value
    let urlParam = window.location.hash;
    // Do something with new hash value
};

работал удовольствие, работает с вперед и назад кнопки браузера, а также в истории браузера.


еще одна отличная реализация история jQuery который будет использовать собственное событие onhashchange, если оно поддерживается браузером, если нет, он будет использовать iframe или интервал соответственно для браузера, чтобы обеспечить успешную эмуляцию всех ожидаемых функций. Он также предоставляет хороший интерфейс для привязки к определенным состояниям.

еще один проект стоит отметить, а также jQuery Ajaxy что в значительной степени является расширением для истории jQuery для добавления ajax в микс. Как когда вы начинаете использовать ajax с хэшами, он получает довольно сложно!


var page_url = 'http://www.yoursite.com/'; // full path leading up to hash;
var current_url_w_hash = page_url + window.location.hash; // now you might have something like: http://www.yoursite.com/#123

function TrackHash() {
    if (document.location != page_url + current_url_w_hash) {
        window.location = document.location;
    }
    return false;
}
var RunTabs = setInterval(TrackHash, 200);

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


Я использую path.js для маршрутизации на стороне клиента. Я нашел его довольно кратким и легким (он также был опубликован в NPM) и использует навигацию на основе хэша.

путь.JS NPM

путь.js GitHub


Я использовал плагин jQuery, HUtil, и написал YUI история, как интерфейс поверх него.

проверьте это один раз. Если тебе нужна помощь, я могу помочь.