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

HTMLでブラウザウィンドウを閉じたときにスクリプトを実行する方法

Webブラウザのウィンドウが閉じられた瞬間にスクリプト（JavaScript）を実行したい場合は、HTMLのonunload属性を利用できます。この属性は、ページがアンロードされるタイミング――つまりユーザーがタブやウィンドウを閉じたとき、あるいは別のページへ移動したとき――に、指定したJavaScript関数を自動的に呼び出します。

実装例

以下のコードは、onunload属性を使って、ウィンドウが閉じられたときにアラートを表示するシンプルなサンプルです。

<!DOCTYPE html>
<html>
   <body onunload = "display()">
      <h2>Tutorialspoint</h2>
      <h3>Simply Easy learning</h3>
      <script>
         function display() {
            alert("Bye!");
         }
      </script>
   </body>
</html>

コードの解説

<body>タグにonunload="display()"を指定することで、ページが閉じられる際にdisplay()関数が自動的に実行されます。この関数の中ではalert("Bye!")により、ユーザーへ「さようなら」のメッセージを表示しています。実際に動作を確認するには、ファイルを保存してブラウザで開き、タブやウィンドウを閉じてみてください。

注意点：onunload属性は非推奨（deprecated）

onunload属性およびunloadイベントは、現在のHTML標準では非推奨とされています。主な理由は以下のとおりです。

  • モバイルブラウザなど一部の環境では確実に発火しない場合がある
  • ページのバック・フォワードキャッシュ（bfcache）を無効化してしまい、ページ表示速度に悪影響を与える

そのため、近年の開発ではaddEventListener()を使ってpagehideイベントやvisibilitychangeイベントを利用する方法が推奨されています。

window.addEventListener('pagehide', function() {
  console.log('ページが閉じられました');
});

目的や対応ブラウザの範囲に応じて適切なイベントを選択し、ユーザー体験を損なわないよう実装することを心がけましょう。

  1. HTMLでブラウザがメディアデータを取得中のときにスクリプトを実行するには？

    HTMLでは、onprogress属性を使用することで、ブラウザがメディアデータ（動画や音声）をダウンロードしている最中にスクリプトを実行できます。onprogress属性とはonprogress属性は、ブラウザがメディアデータを取得（バッファリング）している間に発生するイベントです。読み込みの進捗状況をユーザーへ通知したり、ローディング表示を制御したりする際に活用できます。実装例以下のコードを実行して、onprogress属性の動作を確認してみましょう。<!DOCTYPE html> <html>    <body>   &n

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

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