如何检测 JavaScript 中的 URL 变化？

如何使用事件侦听器检测 JavaScript 中的 URL 更改

监视 URL 更改对于许多 JavaScript 应用程序至关重要，特别是那些使用 AJAX 和单一- 页面架构。在本文中，我们将研究可用于检测 URL 更改的各种方法，并探索最有效的方法。

URL 更改的事件处理程序

有多个事件处理程序可用于跟踪 JavaScript 中的 URL 更改。最常见的包括：

• 'hashchange' 事件：监视 URL 中“#”符号后面部分的变化。
• 'popstate' 事件：当使用浏览器的后退或前进按钮或修改历史对象时激活（例如，通过PushState 或 ReplaceState)。

这些事件处理程序提供了一种可靠的方法来检测 URL 更改，但它们有局限性。 'hashchange' 事件仅在 '#' 后面的片段发生更改时触发，而 'popstate' 事件可能并不总是可靠地触发。

用于全面 URL 监控的自定义事件

为了克服现有事件处理程序的限制，可以创建自定义事件来监视所有 URL 更改。通过修改历史对象，我们可以确保每次通过pushState、replaceState或popstate事件更新URL时都会触发自定义的“locationchange”事件。

以下是实现自定义事件的代码：

(() => {
    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 更改

结论

利用事件处理程序或实现自定义事件提供了监视 JavaScript 中 URL 更改的有效方法。每种方法都有其自身的优点和局限性。通过了解这些选项并根据具体要求选择最合适的方法，开发人员可以确保他们的应用程序有效响应 URL 更改。

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