如何检查URL是否在JavaScript中发生了变化?例如,像GitHub这样使用AJAX的网站,会在#符号后附加页面信息,以创建唯一的URL,而无需重新加载页面。检测该URL是否发生变化的最佳方法是什么?
是否再次调用onload事件? 是否有URL的事件处理程序? 或者必须每秒钟检查URL以检测更改?
如何检查URL是否在JavaScript中发生了变化?例如,像GitHub这样使用AJAX的网站,会在#符号后附加页面信息,以创建唯一的URL,而无需重新加载页面。检测该URL是否发生变化的最佳方法是什么?
是否再次调用onload事件? 是否有URL的事件处理程序? 或者必须每秒钟检查URL以检测更改?
当前回答
适用于Chrome 102+ (2022-05-24)
navigation.addEventListener("navigate", e => {
console.log(`navigate ->`,e.destination.url)
});
消防引用巫术崇拜者
其他回答
经过一番研究后编辑:
不知怎么的,我似乎被Mozilla文档上的文档愚弄了。当代码中调用pushState()或replaceState()时,popstate事件(及其回调函数onpopstate)不会被触发。因此,原来的答案并不适用于所有情况。
然而,有一种方法可以绕过这个问题,根据@alpha123对函数进行猴子补丁:
var pushState = history.pushState;
history.pushState = function () {
pushState.apply(history, arguments);
fireEvents('pushState', arguments); // Some event-handling function
};
原来的答案
假设这个问题的标题是“如何检测URL更改”,当你想知道完整路径更改(而不仅仅是哈希锚)时,答案是你可以监听popstate事件:
window.onpopstate = function(event) {
console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
在Mozilla Docs中引用popstate
目前(2017年1月)全球92%的浏览器支持popstate。
另一种简单的方法是通过添加一个单击事件,通过类名到页面上的锚标记来检测它何时被单击,然后您现在可以使用window.location.href来获取url数据,您可以使用这些数据来向服务器运行ajax请求。简单易行。
用jquery(和一个插件)就可以做到
$(window).bind('hashchange', function() {
/* things */
});
http://benalman.com/projects/jquery-hashchange-plugin/
否则,你必须使用setInterval并检查哈希事件的变化(window.location.hash)
更新!一个简单的草稿
function hashHandler(){
this.oldHash = window.location.hash;
this.Check;
var that = this;
var detect = function(){
if(that.oldHash!=window.location.hash){
alert("HASH CHANGED - new has" + window.location.hash);
that.oldHash = window.location.hash;
}
};
this.Check = setInterval(function(){ detect() }, 100);
}
var hashDetection = new hashHandler();
要收听url更改,请参见以下内容:
window.onpopstate = function(event) {
console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
如果您打算在某些特定条件后停止/删除侦听器,请使用此样式。
window.addEventListener('popstate', function(e) {
console.log('url changed')
});
我希望能够添加locationchange事件监听器。经过下面的修改,我们就可以这样做了
window.addEventListener('locationchange', function () {
console.log('location changed!');
});
相比之下,window.addEventListener('hashchange',() =>{})只会在url中标签后的部分发生变化时触发,而window.addEventListener('popstate',() =>{})并不总是工作。
这种修改类似于Christian的回答,修改了history对象以添加一些功能。
默认情况下,在这些修改之前,有一个popstate事件,但是没有pushstate和replacestate事件。
这将修改这三个函数,以便所有函数都触发一个自定义locationchange事件供您使用,如果您想使用这些事件,还可以推送state和replacestate事件。
这些是修改:
(() => {
let oldPushState = history.pushState;
history.pushState = function pushState() {
let ret = oldPushState.apply(this, arguments);
window.dispatchEvent(new Event('pushstate'));
window.dispatchEvent(new Event('locationchange'));
return ret;
};
let oldReplaceState = history.replaceState;
history.replaceState = function replaceState() {
let ret = oldReplaceState.apply(this, arguments);
window.dispatchEvent(new Event('replacestate'));
window.dispatchEvent(new Event('locationchange'));
return ret;
};
window.addEventListener('popstate', () => {
window.dispatchEvent(new Event('locationchange'));
});
})();
注意,我们正在创建一个闭包,将旧函数保存为新函数的一部分,以便在调用新函数时调用它。