如何使用JavaScript檢測地址欄更改？

Question

我有當用戶操縱該網站可能有這樣的URL作爲

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

一個沉重的Ajax應用程序，地址欄即可更改爲類似

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

無需重新加載頁面。

我的問題是下面的順序：

1. 用戶爲書籤的第一個URL。
2. 用戶操縱應用程序，使第二個URL是當前狀態。
3. 在步驟1
4. 在地址欄的變化，從http://example.com/myApp/#page=5到http://example.com/myApp/#page=1的URL創建書籤的用戶點擊，但我不知道的方式來檢測的變化發生了。

如果我檢測到更改，則某些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是這類事情的優庫。