如何使用 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

您应该扩展位置对象以公开可以绑定到的事件。

IE：

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地址 是此类内容的优秀库。