Question

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

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

当用户操作网站时，地址栏可以更改为

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

无需重新加载页面。

我的问题是以下顺序：

用户为第一个网址添加书签。
用户操纵应用程序，使第二个URL成为当前状态。
用户点击在步骤1中创建的书签。
地址栏中的网址从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
}

Answer 4

SWFaddress是这类事物的绝佳库。

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

4 个答案: