如何使用JavaScript检测地址栏更改？

Question

我有一个Ajax繁重的应用程序,可能有一个URL,如

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

当用户操作站点时,地址栏可以更改为类似的内容

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,但我不知道如何检测变化发生了.

如果我检测到某个更改,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

您应该扩展location对象以公开可以绑定到的事件.

即:

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
}