如何在 JavaScript 中检测 URL 更改（包括哈希更改）？

在 JavaScript 中使用哈希检测 URL 更改

观察 URL 中的更改（包括哈希符号后面的更改）对于使用 AJAX 的应用程序至关重要用于页面更新。 JavaScript 提供了多个选项来跟踪 URL 更改。

事件处理程序

JavaScript 提供了可用于检测 URL 更改的事件处理程序：

• onload: 该事件不适合检测初始页面后的 URL 变化load.
• hashchange:仅当哈希符号后面的部分发生变化时才会触发该事件，其他URL修改不会触发。

手动检查URL

定期轮询 URL 是检测更改的一种粗略但可靠的方法。然而，它需要一个持续的计时器，并且计算成本很高。

增强的历史API

现代浏览器支持导航API，它提供了专用的“导航”事件。每当位置发生变化时，无论原因如何（例如，pushState、replaceState、哈希更改），都会触发此事件。

旧版浏览器的 Polyfill

对于不支持的浏览器不支持导航 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'));
    });
})();

此修改添加了自定义“locationchange”事件触发所有历史操作（pushState、replaceState、popstate）并允许附加事件侦听器以检测 URL 更改。

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