检测 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中文网其他相关文章！
