如何在JavaScript中检查URL是否已更改?例如,像GitHub这样使用AJAX的网站将在#符号后附加页面信息,以创建一个唯一的URL,而无需重新加载页面。检测此URL是否更改的最佳方法是什么
- 是否再次调用
onload事件 - 是否有URL的事件处理程序
- 或者必须每秒检查URL以检测更改
我希望能够添加locationchange事件侦听器。在下面的修改之后,我们就可以这样做了
窗口。addEventListener('locationchange',function(){
log('location changed!');
})
相比之下,window.addEventListener('hashchange',()=>;{})只有在url中的hashtag后面的部分发生变化时才会触发,并且window.addEventListener('popstate',()=>;{})并不总是有效
这个修改,类似于Christian的回答,修改history对象以添加一些功能
默认情况下,在这些修改之前,有一个popstate事件,但是pushstate和replacestate没有事件
这将修改这三个函数,以便所有函数都触发一个自定义的locationchange事件供您使用,如果您想使用这些事件,还可以触发pushstate和replacestate事件
这些是修改:
history.pushState=(f=>;函数pushState(){
var ret=f.apply(这是参数);
dispatchEvent(新事件('pushstate'));
window.dispatchEvent(新事件('locationchange'));
返回ret;
})(历史.国家);
history.replaceState=(f=>;函数replaceState(){
var ret=f.apply(这是参数);
dispatchEvent(新事件('replacestate'));
window.dispatchEvent(新事件('locationchange'));
返回ret;
})(历史.国家);
window.addEventListener('popstate',()=>{
window.dispatchEvent(新事件('locationchange'))
});
注:
我们正在创建一个闭包,old=(f=>;function new(){f();…})(old)将old替换为new函数,该函数包含保存在其中的以前的old(old此时不运行,但将在new中运行)