如何在 JavaScript 中检测哈希后的 URL 更改？

在 JavaScript 中检测哈希后的 URL 更改

使用基于 AJAX 的网站（如 GitHub）时，可以确定 URL 是否已更改至关重要的。 JavaScript 允许使用不同的方法来监控 URL 更改。

检测 URL 更改的选项：

• onload 事件： 仅触发此事件当页面完全重新加载时，因此不适合检测部分 URL
• URL 事件处理程序： JavaScript 不为 URL 更改提供直接事件处理程序。
• 定期 URL 检查： 不断检查 URL每一秒都可能是资源密集型的

改进方法：Navigation API (2024)

现代浏览器现在支持 Navigation API，它提供了更有效的方法来检测 URL 更改。它的工作原理如下：

window.navigation.addEventListener("navigate", (event) => {
  console.log('location changed!');
});

替代方法（预导航 API）

如果导航 API 不可用，可以使用自定义方法以下代码：

(function () {
    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'));
    });
})();

此解决方案修改历史对象以添加功能，允许创建自定义事件听众，例如：

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

以上是如何在 JavaScript 中检测哈希后的 URL 更改？的详细内容。更多信息请关注PHP中文网其他相关文章！