JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのonpagehideイベントの使い方を徹底解説

onpagehideイベントは、ユーザーが現在のページから離れて別のページへ移動しようとしたときに発生するJavaScriptのイベントです。具体的には、次のような操作がトリガーとなります。

  • ブラウザの「戻る」「進む」ボタンによるページ移動
  • リンクのクリックによる別ページへの遷移
  • ページの再読み込み（リロード）
  • タブやウィンドウを閉じる操作

onpagehideイベントの主な活用シーン

このイベントは、ユーザーがページを離れる直前に処理を実行したい場合に便利です。代表的な用途は以下の通りです。

  • 入力途中のフォームデータを一時保存する（localStorageなど）
  • ユーザーの離脱をアクセス解析ツールに記録する
  • 離脱時に感謝メッセージなどの処理を行う

実装例

以下のコードを実行して、JavaScriptでonpagehideイベントを実装する方法を確認してみましょう。ページを閉じたり別のページへ移動すると、alert()によるメッセージが表示されます。

<!DOCTYPE html>
<html>
  <body onpagehide="newFunc()">
    <p>ページを閉じて、何が起こるか確認してみましょう！</p>
    <script>
      function newFunc() {
        alert("Thank you!");
      }
    </script>
  </body>
</html>

addEventListenerを使った書き方

HTML属性に直接指定する代わりに、addEventListener()を使ってイベントを登録することもできます。こちらの方がHTMLとJavaScriptを分離できるため、保守性の高いコードになります。

window.addEventListener("pagehide", function () {
  console.log("ページから離れました");
});

注意点

モダンブラウザでは、ページ離脱時のダイアログ表示（alertなど）がセキュリティ上の理由から制限される場合があります。また、バックフォワードキャッシュ（bfcache）の影響でイベントが期待どおりに発火しないケースもあるため、重要なデータ保存処理はvisibilitychangeイベントとの併用も検討しましょう。

  1. JavaScriptにおけるscreenYマウスイベントの役割とは？

    JavaScriptにおいて、screenYマウスイベントプロパティは、イベントが発生した際のマウスポインタの垂直方向（Y軸）の座標を返します。 この値は、画面（モニター）の左上を原点とした絶対的な座標として取得されるため、ブラウザウィンドウの位置に関係なく、画面全体の中でのポインタ位置を知ることができます。なお、水平方向の座標を取得したい場合は、同じく用意されている screenX プロパティを使用します。 screenYの主な特徴 マウスポインタの垂直座標（Y座標）をピクセル単位で返す 画面の左上を基準点（0, 0）とする clientY とは異なり、ブラウザの表示領域ではなく画面全体が

  2. JavaScriptのevery()メソッドとは？使い方とサンプルコードをわかりやすく解説

    JavaScriptの配列（Array）メソッドである every() は、配列内のすべての要素が、指定した関数によるテスト条件を満たしているかどうかを判定するメソッドです。 判定結果はブール値（真偽値）として返されます。 すべての要素が条件を満たす場合 → true 1つでも条件を満たさない要素がある場合 → false every()メソッドのパラメータ every()メソッドでは、以下の2つの引数を使用できます。 callback − 各要素に対して実行されるテスト用の関数です。この関数が false を返すと、その時点で処理が中断され、every()全体が false を返します