如何可靠地检测 JavaScript 中的 URL 变化？

检测 JavaScript 中的 URL 更改

要跟踪 JavaScript 中的 URL 更改，确定可靠的方法至关重要。虽然 onload 事件不合适，但有几个可行的选择。

1.哈希更改事件：

仅当 # 符号后面的 URL 部分发生变化时才会触发该事件。它仅限于与哈希相关的更改。

2. Popstate 事件：

当使用浏览器的历史导航按钮（例如后退和前进）或通过 PushState 或 ReplaceState 方法更改 URL 时，会发生此事件。然而，它可能并不适用于所有情况。

3.自定义 Locationchange 事件（推荐）：

为了确保全面的 URL 更改检测，可以实现自定义事件侦听器“locationchange”。这涉及修改历史对象以触发所有历史状态更改的自定义事件（即，pushState、replaceState 和 popstate）。

实现：

// Create a custom locationchange event
window.addEventListener('locationchange', () => {
    console.log('Location changed!');
});

// Modify history object to trigger custom events
(() => {
    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'));
    });
})();

通过使用此自定义事件，您可以有效地检测任何 URL 更改，无论它是通过 hash、pushState 还是 ReplaceState 发生。该方法为监控 JavaScript 应用程序中的 URL 变化提供了全面的解决方案。

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