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')); }); })();
このカスタム イベントを使用すると、ハッシュ、pushState、replaceState のいずれによって発生したかに関係なく、URL の変更を効果的に検出できます。この方法は、JavaScript アプリケーションで URL の変更を監視するための包括的なソリューションを提供します。
以上がJavaScript で URL の変更を確実に検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。