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

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

Обновите, чтобы этот ответ был свежим:

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

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

Приятно то, что вы можете писать код, которому не нужно даже беспокоиться о поддержке hashchange, однако вам НЕОБХОДИМО творить чудеса в виде несколько менее известной функции jQuery специальные события jQuery.

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

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

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

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

• Internet Explorer 8
• Firefox 3.6
• Хром 5
• Safari 5
• Opera 10.6

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

Есть много уловок для работы с историей и 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 с версии 3.6. См. window.onhashchange.

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

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

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

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;

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

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

Я наблюдал за параметром хеширования, используя

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

потом

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

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

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

Еще одна отличная реализация - история 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) и использует навигацию на основе хешей.

path.js NPM

path.js GitHub

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

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