Как я могу обнаружить изменение адресной строки с помощью 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 вводит событие hashchange , которое позволяет вам регистрироваться для уведомлений об изменениях хеша 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

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