31

我有一个 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 会对其进行操作。

4

4 回答 4

40

HTML5 引入了一个hashchange事件，它允许您注册 url 哈希更改的通知，而无需使用计时器轮询它们。

它受到所有主要浏览器（Firefox 3.6、IE8、Chrome、其他基于 Webkit 的浏览器）的支持，但我仍然强烈建议使用为您处理事件的库 - 即在不支持的浏览器中使用计时器HTML5 事件，否则使用该事件。

window.onhashchange = function() {
    alert("hashtag changed");
};

有关该事件的更多信息，请参阅https://developer.mozilla.org/en/dom/window.onhashchange和http://msdn.microsoft.com/en-us/library/cc288209%28VS.85%29。 .aspx _

于 2010-11-06T03:00:34.207 回答
20

使用 setTimeout/interval 定期检查当前地址：

 var oldLocation = location.href;
 setInterval(function() {
      if(location.href != oldLocation) {
           // do your action
           oldLocation = location.href
      }
  }, 1000); // check every second
于 2009-12-18T22:04:56.720 回答
6

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

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
}
于 2009-12-18T22:36:27.113 回答
0

SWFaddress是处理这些类型事物的优秀库。

于 2009-12-18T22:43:34.673 回答