如何使用 JavaScript 检测地址栏更改?
-
20-09-2019 - |
题
我有一个 Ajax 密集型应用程序,可能有一个 URL,例如
http://example.com/myApp/#page=1
当用户操作该网站时,地址栏可能会更改为类似的内容
http://example.com/myApp/#page=5
无需重新加载页面。
我的问题是以下顺序:
- 用户将第一个 URL 添加为书签。
- 用户操纵应用程序使得第二URL是当前状态。
- 用户单击在步骤 1 中创建的书签。
- 地址栏中的 URL 更改为 http://example.com/myApp/#page=5 到 http://example.com/myApp/#page=1, ,但我不知道如何检测发生的变化。
如果我检测到变化,一些 JavaScript 就会对其采取行动。
解决方案
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.
其他提示
使用 setTimeout/interval 定期检查当前地址:
var oldLocation = location.href;
setInterval(function() {
if(location.href != oldLocation) {
// do your action
oldLocation = location.href
}
}, 1000); // check every second
您应该扩展位置对象以公开可以绑定到的事件。
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
}
SWF地址 是此类内容的优秀库。
不隶属于 StackOverflow