如何检测 JavaScript 中的哈希值后 URL 是否已更改

如何在 JavaScript 中检查 URL 是否已更改？例如，像 GitHub 这样使用 AJAX 的网站将在 # 符号后附加页面信息，以创建唯一的 URL，而无需重新加载页面。检测此 URL 是否发生变化的最佳方法是什么？

• Is the onload事件再次调用？
• URL 是否有事件处理程序？
• 或者必须每秒检查一次 URL 以检测更改？

我希望能够添加locationchange事件监听器。经过下面的修改后，我们就可以这样做了，像这样

window.addEventListener('locationchange', function () {
    console.log('location changed!');
});

相比之下，window.addEventListener('hashchange',() => {})仅当 url 中的主题标签后面的部分发生更改时才会触发，并且window.addEventListener('popstate',() => {})并不总是有效。

这个修改，类似于克里斯蒂安的回答 https://stackoverflow.com/a/41825103/3577695，修改历史对象以添加一些功能。

默认情况下，在这些修改之前，有一个popstate事件，但没有事件pushstate, and replacestate.

这修改了这三个函数，以便全部触发自定义locationchange事件供您使用，并且pushstate and 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 https://stackoverflow.com/questions/111102/how-do-javascript-closures-work?rq=1，将旧函数保存为新函数的一部分，以便每当调用新函数时都会调用它。