Downcodes のエディターでは、JavaScript 監視ページ更新イベントの詳細な説明を提供します。ページ更新イベントの監視は、Web 開発において非常に重要です。これは、開発者がユーザー データの保存やリクエストの送信など、ページが更新または閉じられたときに必要な操作を実行するのに役立ちます。ただし、ブラウザのセキュリティ制限により、ページの更新イベントと閉じるイベントを正確に区別するのは簡単ではありません。この記事では、いくつかの一般的な方法を詳しく説明し、それらの長所と短所を分析して、最適なオプションを選択できるようにします。
JavaScript はいくつかの方法でページ更新イベントを監視できます。最も一般的な方法は、beforeunload および unload イベント リスナーを使用することです。ただし、ブラウザのセキュリティ制限のため、通常、終了イベントを監視せずにページの更新だけを監視することは技術的に困難であることに注意することが重要です。 ただし、いくつかのトリックを使用すると、これら 2 つのイベントを区別することができます。たとえば、Cookie を設定するか、sessionStorage を使用してステータスを記録し、ユーザーがページを再度ロードするときにこれらのステータスをチェックして、ページが期限内にロードされているかどうかを判断します。更新または終了します。
ユーザーがページを更新しようとすると、beforeunload イベントを通じてある程度のレベルの監視を実行できます。
window.addEventListener('beforeunload', function (e) {
//更新時に表示する警告メッセージを設定します
varconfirmationMessage = 'ページを更新してもよろしいですか? ';
(e || window.event).returnValue = 確認メッセージ;
確認メッセージを返します。
});
このコードは、ユーザーがページを更新したときに確認ダイアログ ボックスをポップアップ表示します。ただし、ユーザーがページを閉じようとしたときにも起動されます。したがって、これはリフレッシュとシャットダウンを正確に区別する方法ではありません。
セッション中のユーザーのステータス情報は、現在のブラウザ タブ内でのみ有効であり、タブが閉じられると、sessionStorage に保存されているデータは消去されます。
// ページの読み込み時に実行されます
window.onload = function() {
if (sessionStorage.getItem(is_reloaded)) {
console.log(ページが更新されました);
}
sessionStorage.setItem(is_reloaded, true);
};
window.addEventListener('beforeunload', function (e) {
if (!window.closed) {
sessionStorage.removeItem(is_reloaded);
}
});
この例では、ページの読み込み時に sessionStorage に is_reloaded 項目を設定します。ページが更新されても項目はまだ存在するため、is_reloaded をチェックすることでページが更新されたかどうかを知ることができます。この方法も、リフレッシュとクローズを正確に区別することはできませんが、ユーザーの行動パターンの分析と組み合わせることで、ある程度の区別を提供できます。
Page Visibility API は、ページがユーザーに表示されているかどうかを検出する機能を提供し、ユーザーの行動を間接的に決定するために使用することもできます。
document.addEventListener('visibilitychange', function() {
if (document.visibilityState === 'hidden') {
// ユーザーはおそらく閉じるかジャンプすることにより、現在のページから離れました。
}
if (document.visibilityState === 'visible') {
// ページを開くか、更新するか、別のタブから切り替えることによって、ページが表示されます。
}
});
この API を利用すると、ユーザーがページから離れるときに何らかの処理を行い、ユーザーがページに戻ってきたときに判断することができます。ただし、これは更新イベントのみを正確に監視するわけではありません。
JavaScript で Cookie を設定し、その Cookie に短い有効期限を与え、ユーザーが更新したときに Cookie が存在するかどうかを確認し、タイムスタンプに基づいて判断できます。
//クッキーを設定する
function setCookie(名前, 値, 秒) {
var 期限切れ = 新しい日付(Date.now() + 秒 * 1000);
document.cookie = 名前 + = + 値 + ;expires= +expires.toUTCString();
}
// クッキーを取得する
関数 getCookie(名前) {
var keyValue = document.cookie.match('(^|;) ?' + 名前 + '=([^;]*)(;|$)');
キー値を返しますか? キー値[2] : null;
}
// モニターの更新
window.addEventListener('load', function() {
var lastTime = getCookie('last_refresh_time');
var currentTime = Date.now();
if (lastTime && currentTime - parseInt(lastTime) < 1000) {
// 2 つのタイムスタンプの差が 1 秒未満の場合、更新イベントとみなされます
console.log(ページが更新されました);
}
setCookie('last_refresh_time', currentTime, 1);
});
Cookie の有無と現在時刻との差を設定して確認することで、ページが更新されたのか、開いたばかりなのかを推測できる場合があります。ただし、Cookie はウィンドウとタブにまたがる可能性があるため、これはまだ完全な解決策ではありません。
1. JavaScript を通じてページ更新イベントを監視するにはどうすればよいですか?
JavaScript を通じてページ更新イベントを監視し、関連する操作を実行できます。 1 つの方法は、beforeunload イベントを使用することです。
window.addEventListener('beforeunload', function(event) { // ページが更新される前に実行されるコード // たとえば、リクエストの送信、データの保存など });2. JavaScript でページ更新イベントのみを監視し、ページ終了イベントは監視しない方法は?
ページ更新イベントのみを監視し、ページを閉じるイベントは監視したくない場合は、beforeunload イベントと unload イベントを組み合わせて使用できます。
window.addEventListener('beforeunload', function(event) { // ページが更新される前に実行されるコード // たとえば、リクエストの送信、データの保存など }); { // ページが閉じられたときに実行されるコード // たとえば、リソースのクリーンアップ、終了時間の節約など。 });このようにして、ユーザーがページを更新すると beforeunload イベントがトリガーされ、ユーザーがページを閉じると beforeunload イベントと unload イベントの両方がトリガーされます。
3. JavaScript で Web ページの更新イベントのみを監視し、他のナビゲーション メソッドの監視を除外するにはどうすればよいですか?
Web ページの更新イベントのみを監視し、他のナビゲーション方法 (リンクのクリックや進む/戻るボタンのクリックなど) は監視しない場合は、PerformanceNavigation インターフェイスと組み合わせて beforeunload イベントを使用できます。
window.addEventListener('beforeunload', function(event) { // Web ページの更新イベントかどうかを判断します if (performance.navigation.type === Performance.navigation.TYPE_RELOAD) { // ページが更新される前にコードが実行されます// たとえば、リクエストの送信、データの保存、その他の操作}});Performance.navigation.type を使用してナビゲーション タイプを決定します。TYPE_RELOAD の場合は、ページが更新操作によってトリガーされることを意味します。このようにして、対応するコードは Web ページの更新イベントでのみ実行されます。
上記の内容が、JavaScript ページ更新イベント監視の方法をより深く理解するのに役立つことを願っています。ダウンコードのエディターは、実際のアプリケーションでは、特定のニーズに応じて適切な方法を選択し、互換性を処理する必要があることを思い出させます。