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

【HTML】onunload属性でページのアンロード時にスクリプトを実行する方法

Webページがアンロード（unload）されたタイミングで処理を実行したい場合は、onunload属性を使用します。この属性は、ユーザーがページを閉じたり、別のページへ移動したりして、現在のページがアンロードされるときに発火します。

基本的な使い方

body要素にonunload属性を設定し、実行したい関数を指定するだけで実装できます。以下のコード例をご覧ください。

<!DOCTYPE html>
<html>
<body onunload="display()">

  <h2>Tutorialspoint</h2>
  <h3>Simply Easy learning</h3>

  <script>
    function display() {
      alert("Bye!");
    }
  </script>

</body>
</html>

コードの解説

  • onunload属性： bodyタグに記述し、ページがアンロードされるときにdisplay()関数を呼び出します。
  • display()関数： アンロード時に「Bye!」というメッセージのアラートを表示します。

注意点：onunloadは非推奨

onunload属性はHTML5では非推奨（deprecated）とされており、モダンブラウザではセキュリティやユーザー体験への配慮から、アラートなどが正しく動作しない場合があります。

現在では、pagehideイベントやbeforeunloadイベントをaddEventListener()で登録する方法が推奨されています。

推奨される代替コード例

<script>
  window.addEventListener("pagehide", function () {
    console.log("ページがアンロードされました");
  });
</script>

このようにaddEventListener()を使えば、HTMLとJavaScriptを分離でき、可読性と保守性の高いコードになります。ページ離脱時の処理を実装する際は、用途に応じてpagehideやvisibilitychangeなどのイベントも検討してみてください。

  1. 【HTML】ユーザーがページに移動したときにスクリプトを実行する方法｜onpageshow属性の使い方

    ユーザーがページに移動した際にスクリプトを実行したい場合は、onpageshow属性を使用します。onpageshow属性とはonpageshow属性は、ページが表示されたときに発生する「onpageshowイベント」に対応してスクリプトを実行するための属性です。このイベントは、ページが最初に読み込まれたときだけでなく、別のページから戻ってきた場合（キャッシュからページが復元された場合）にも発生します。一般的なonloadイベントはキャッシュからページが表示される際には発火しませんが、onpageshowイベントはそのようなケースでも必ず実行されるという特徴があります。そのため、「戻る」ボタン

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

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