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

Question

У меня есть тяжелое приложение 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.

Answer 1

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

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

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

Answer 2

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

 var oldLocation = location.href;
 setInterval(function() {
      if(location.href != oldLocation) {
           // do your action
           oldLocation = location.href
      }
  }, 1000); // check every second

Answer 3

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

то есть:

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
}

Answer 4

SWFадрес — отличная библиотека для подобных вещей.