如何在 JavaScript 中检查 URL 是否已更改?例如,像 GitHub 这样使用 AJAX 的网站会在 # 符号后附加页面信息,以创建一个唯一的 URL,而无需重新加载页面。检测此 URL 是否更改的最佳方法是什么?
- 是否再次调用了
onload
事件? - URL 是否有事件处理程序?
- 或者必须每秒检查一次 URL 以检测变化?
最佳答案
我希望能够添加 locationchange
事件监听器。经过下面的修改,我们就可以了,像这样
window.addEventListener('locationchange', function () {
console.log('location changed!');
});
相比之下,window.addEventListener('hashchange',() => {})
只会在 url 中的主题标签之后的部分发生变化时触发,而 window.addEventListener( 'popstate',() => {})
并不总是有效。
这个修改,类似于Christian's answer , 修改历史对象以添加一些功能。
默认情况下,在这些修改之前,有一个popstate
事件,但是没有pushstate
和replacestate
的事件。
这修改了这三个函数,以便所有函数都触发一个自定义的 locationchange
事件供您使用,如果您使用 pushstate
和 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'));
});
})();
请注意,我们正在创建一个 closure , 将旧函数保存为新函数的一部分,以便在调用新函数时调用它。
关于javascript - 如何在 JavaScript 中检测哈希后 URL 是否已更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6390341/