Как определить изменение адресной строки с помощью JavaScript?

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

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

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

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

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

Моя проблема следующая:

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

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

Ответы

Ответ 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.

Ответ 2

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

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

Ответ 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
}

Ответ 4

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