Как я могу обнаружить изменение адресной строки с помощью JavaScript?

У меня есть тяжелое приложение Ajax, которое может иметь URL-адрес, например

http://example.com/myApp/#page=1

Когда пользователь манипулирует сайтом, адресная строка может измениться на что-то вроде

http://example.com/myApp/#page=5

без перезагрузки страницы.

Моя проблема заключается в следующей последовательности:

  1. Пользователь добавляет в закладки первый URL.
  2. Пользователь манипулирует приложением таким образом, что вторым URL-адресом является текущее состояние.
  3. Пользователь нажимает на закладку, созданную на шаге 1.
  4. URL-адрес в адресной строке изменится с http://example.com/myApp/#page=5 на http://example.com/myApp/#page=1, но я не знаю, как обнаружить, что изменение произошло.

Если я обнаружу изменение, на него подействует некоторый JavaScript.


javascript dom-events address-bar
person JoshNaro    schedule 18.12.2009    source источник
comment
Мне любопытно, почему приложение было разработано именно так? Я не вижу реальной необходимости в изменении URL.   -  person Vinko Vrsalovic    schedule 19.12.2009
comment
Он работает так же, как строка запроса, но не заставляет браузер перезагружать страницу. Это было сделано для того, чтобы полезную нагрузку клиента не приходилось извлекать и загружать каждый раз при изменении страницы. Полезная нагрузка не так легко кэшируется, требует значительного времени инициализации JavaScript и не может предоставить клиенту беспроблемный опыт.   -  person JoshNaro    schedule 21.12.2009

Ответы (4)


arrow_upward
39
arrow_downward

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

Он поддерживается всеми основными браузерами (Firefox 3.6, IE8, Chrome, другими браузерами на основе Webkit), но я все же настоятельно рекомендую использовать библиотеку, которая обрабатывает событие за вас, т.е. используя таймер в браузерах, не поддерживающих событие HTML5 и использование события в противном случае.

window.onhashchange = function() {
    alert("hashtag changed");
};

Для получения дополнительной информации о мероприятии см. https://developer.mozilla.org/en/dom/window.onhashchange и http://msdn.microsoft.com/en-us/library/cc288209%28VS.85%29.aspx.

person ThiefMaster    schedule 06.11.2010
comment
Теперь, если бы все пользователи IE6/7 обновились до ›=IE8. Спасибо за обновления. - person JoshNaro; 08.11.2010
comment
Я начал использовать плагин jqouery события hashChange - все работает гладко :D - person JJschk; 11.12.2012

arrow_upward
20
arrow_downward

периодически проверяйте текущий адрес, используя setTimeout/interval:

 var oldLocation = location.href;
 setInterval(function() {
      if(location.href != oldLocation) {
           // do your action
           oldLocation = location.href
      }
  }, 1000); // check every second
person user187291    schedule 18.12.2009
comment
Этот ответ правильный. Вам также следует подумать об использовании чего-то вроде компонента менеджера истории YUI, который сделает это за вас в кросс-браузерном режиме. - person Jonathan Feinberg; 19.12.2009
comment
Если я введу новый адрес и нажму Enter, текущая страница никак не сможет это остановить. - person ZippyV; 19.12.2009
comment
Да, я надеялся, что это было скрытое событие или что-то в этом роде. Использование интервала мне как-то не кажется правильным. Спасибо. - person JoshNaro; 21.12.2009
comment
Подходит ли такой короткий промежуток времени для приложения? То есть, не слишком ли сильно браузер занят выполнением функции? - person Hasib Mahmud; 11.08.2014
comment
Это некрасиво, но, по-видимому, единственный способ: stackoverflow.com/questions/3522090/ - person user2398029; 29.11.2014
comment
ваш код синтаксически неправильный. Пожалуйста, обновите его. (выполнить свое действие). - person albanx; 29.02.2016
comment
Может кто-нибудь объяснить мне, как это могло когда-либо работать? Когда я меняю адрес в адресной строке, браузер загружает новую страницу, а старая страница уничтожается, поэтому эта функция никогда не запускается. - person Mike Nakis; 16.05.2017
comment
@MikeNakis Суть вопроса в том, что ваш сценарий не реализуется. Страница изменяется каким-то динамическим образом с изменением URL-адреса, но никогда не сносится. - person ojchase; 02.03.2021

arrow_upward
6
arrow_downward

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

ie:

window.location.prototype.changed = function(e){};

(function() //create a scope so 'location' is not global
{
    var location = window.location.href;
    setInterval(function()
    {
        if(location != window.location.href)
        {
            location = window.location.href;
            window.location.changed(location);
        }
    }, 1000);
})();

window.location.changed = function(e)
{
    console.log(e);//outputs http://newhref.com
    //this is fired when the window changes location
}
person Skawful    schedule 18.12.2009
comment
На самом деле, поскольку он использует таймер, он не приносит никаких улучшений по сравнению с тем, что делает выбранное решение. - person jmd; 15.02.2013
comment
Не лучшая идея расширять глобальный объект, который уже предоставляет значение, которое вы можете наблюдать. - person Trendy; 22.09.2016

arrow_upward
0
arrow_downward

SWFaddress — отличная библиотека для таких вещей.

person moritzstefaner    schedule 18.12.2009