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

HTMLでドキュメントがアンロードされる直前にスクリプトを実行する方法（onbeforeunloadイベント）

onbeforeunloadイベントとは

onbeforeunloadイベント属性は、ドキュメントがアンロードされようとしているタイミング（ウィンドウを閉じる、ページを再読み込みする、別のページへ移動するなど）で発生します。このイベントを活用することで、ユーザーがページを離れる前に確認ダイアログを表示し、入力途中のデータが意図せず失われるのを防ぐことができます。

使用例

以下のコードを実行して、onbeforeunload属性の動作を確認してみましょう。ウィンドウを閉じるか、F5キーでページを再読み込みすると、イベントが発火します。

<!DOCTYPE html>
<html>
   <body onbeforeunload = "return display()">
      <p>このウィンドウを閉じるか、F5キーを押してください。</p>
      <script>
         function display() {
            return "このページを離れますか？";
         }
      </script>
   </body>
</html>

補足ポイント

近年の主要ブラウザでは、セキュリティおよびユーザー体験保護の観点から、onbeforeunloadで返したカスタムメッセージは表示されず、ブラウザ側の標準的な確認ダイアログが表示される仕様になっています。また、JavaScriptからイベントリスナーを登録する場合は、以下のようにaddEventListener()を使う方法も一般的です。

window.addEventListener('beforeunload', function (e) {
   e.preventDefault();
   e.returnValue = '';
});
  1. HTMLでドキュメント印刷後にスクリプトを実行する方法【onafterprint属性】

    HTMLの onafterprint 属性を使うと、ドキュメントが印刷された後（または印刷処理の実行時）にスクリプトを実行できます。この属性は、<body> 要素などに指定することで、ユーザーが印刷操作を行ったタイミングを検知し、アラート表示やログ記録などの処理を自動的に実行できます。基本的な使い方onafterprint 属性は、イベントハンドラとして関数名を指定するだけで簡単に利用できます。印刷ダイアログが閉じられ、印刷処理が完了した直後に、指定したJavaScriptの関数が呼び出されます。サンプルコード以下のコードを実行して、onafterprint 属性の動作を確認してみ

  2. HTMLで要素がフォーカスを取得したときにスクリプトを実行する方法

    HTMLでは、onfocus属性を使用することで、要素がフォーカスを取得した瞬間にJavaScriptを実行できます。 onfocus属性とは onfocus属性は、テキスト入力欄やボタンなどのフォーム要素がユーザーによって選択され（フォーカスされ）、入力可能な状態になったときに、指定したスクリプト（関数）を呼び出すイベントハンドラです。 主な活用シーンとしては、以下のようなものが挙げられます。 入力欄がフォーカスされたときに背景色を変えて、現在どの項目を編集中か視覚的に強調する 入力欄のプレースホルダーやヒントテキストを表示する バリデーションメッセージやガイダンスを動的に切り替える 実