Как определить изменение адресной строки с помощью 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/интервал:

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 отличная библиотека для этих типов вещей.