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

JavaScriptのonbeforeunloadイベントの使い方を解説

JavaScriptのonbeforeunloadイベントは、ドキュメントがアンロードされる直前（ページを離れる、タブを閉じる、別のページへ移動するなど）に発生するイベントです。このイベントを利用すると、ユーザーがページを離れようとしたタイミングで確認メッセージを表示したり、入力中のデータ保存などの処理を実行したりできます。

onbeforeunloadイベントの基本

onbeforeunloadイベントは、<body>要素に直接指定するか、JavaScriptからwindow.onbeforeunloadとして設定します。イベントハンドラ内で文字列を返すと、多くのブラウザではページを離れるかどうかを確認するダイアログが表示されます。

実装例

以下のコードを実行して、onbeforeunloadイベントの動作を確認してみましょう。リンクをクリックしてページを離れようとすると、イベントが発生します。

<!DOCTYPE html>
<html>
   <body onbeforeunload="return myFunction()">

      <a href="https://www.qries.com">クリックしてQriesを開く</a>
      <script>
         function myFunction() {
            return "onbeforeunloadイベントが動作しています";
         }
      </script>
   </body>
</html>

注意点

  • 近年のモダンブラウザ（Chrome、Firefoxなど）では、セキュリティ上の理由により、戻り値で設定したカスタムメッセージは表示されず、ブラウザ側の標準的な確認ダイアログが表示される仕様になっています。
  • このイベントはユーザーの離脱を妨げる目的で乱用すべきではなく、未保存データの警告など、ユーザー体験を損なわない範囲での利用が推奨されます。
  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 を返します