On - window.location.hash - Изменить?

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

• Internet Explorer 8
• Firefox 3.6
• Chrome 5
• Safari 5
• Opera 10.6

Обратите внимание, что в случае Internet Explorer 7 и Internet Explorer 9 статус if даст true (для "onhashchange" в окнах), но 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/

Есть много трюков, связанных с историей и window.location.hash в браузерах IE:

• В качестве исходного вопроса, если вы переходите со страницы a.html # b в a.html # c, а затем нажмите кнопку "Назад", браузер не знает, что эта страница изменилась. Позвольте мне сказать это с помощью примера: window.location.href будет "a.html # c", независимо от того, находитесь ли вы в a.html # b или a.html # c.

• Собственно, a.html # b и a.html # c хранятся в истории только в том случае, если элементы '< a name= "# b" > ' и '< a name= "# c" > ' существует ранее на странице.

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

• Если вы используете "document.domain = something" в своем коде, тогда вы не можете получить доступ к iframe.contentWindow.document.open() "(и это делает много менеджеров истории)

Я знаю, что это не реальный ответ, но, возможно, заметки IE-History полезны для кого-то.

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

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

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

Вы можете легко реализовать наблюдателя (метод "смотреть" ) по свойству "хэш" объекта "window.location".

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

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

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

Затем вы можете проверить его:

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

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

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

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

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

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

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

Тогда

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

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

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

path.js NPM

path.js GitHub

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);

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

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

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

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

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