如何检测 JavaScript 中哈希符号后的 URL 变化？-js教程-PHP中文网

如何检测 JavaScript 中哈希符号后的 URL 变化？

Barbara Streisand

发布： 2024-11-12 12:54:02

原创

656 人浏览过

How to Detect URL Changes After the Hash Symbol in JavaScript?

检测 JavaScript 中哈希符号后的 URL 更改

JavaScript 提供了检测 URL 是否已更改的方法，包括以下选项：

Onload 事件：
- 井号后面的 URL 发生变化时不会触发 onload 事件。
URL 的事件处理程序：
- 没有专门用于检测 URL 更改的内置事件处理程序。
每秒检查 URL：
- 虽然每秒不断检查 URL 可能有效，但效率低下，可能会导致性能问题。

使用导航 API（适用于现代浏览器）

主要浏览器现在支持导航 API，它提供了更有效的方法来检测 URL 更改:

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

登录后复制

旧版浏览器的自定义事件

对于没有导航 API 的旧版浏览器，可以通过修改历史对象来创建自定义事件监听器：

(() => {
    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"));
    });
})();

登录后复制

现在，您可以使用“locationchange”事件监听 URL 更改：

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

登录后复制

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