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

IT技术 javascript dom-events address-bar
2021-03-12 07:49:19

我有一个 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个回答

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

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

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

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

现在,如果只有那些 IE6/7 用户将全部升级到 >=IE8。感谢更新。
2021-04-21 07:49:19
我开始使用 hashChange 事件的 jqouery 插件 - 一切运行顺利:D
2021-05-01 07:49:19

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

 var oldLocation = location.href;
 setInterval(function() {
      if(location.href != oldLocation) {
           // do your action
           oldLocation = location.href
      }
  }, 1000); // check every second
如果我输入一个新地址并按 Enter 键,当前页面将无法阻止它。
2021-04-22 07:49:19
这很丑陋,但显然是唯一的方法:stackoverflow.com/questions/3522090/...
2021-04-23 07:49:19
是的,我希望有一个隐藏的事件或什么的。以某种方式使用间隔对我来说似乎并不“正确”。谢谢。
2021-04-30 07:49:19
@MikeNakis 问题的前提是您的场景没有发生。该页面正在以某种动态方式更改,URL 更改但从未被拆除。
2021-05-09 07:49:19
这个答案是正确的。您还应该考虑使用像 YUI 历史管理器组件这样的东西,它以跨浏览器的方式为您完成。
2021-05-13 07:49:19

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

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
}
实际上,由于它使用了计时器,因此对于所选解决方案的作用,它并没有真正带来任何增强
2021-04-23 07:49:19
扩展一个已经公开了你可以观察的值的全局对象并不是最好的主意。
2021-05-03 07:49:19

SWFaddress是这些类型的优秀库。