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

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

ユーザーがページに移動した際にスクリプトを実行したい場合は、onpageshow属性を使用します。

onpageshow属性とは

onpageshow属性は、ページが表示されたときに発生する「onpageshowイベント」に対応してスクリプトを実行するための属性です。このイベントは、ページが最初に読み込まれたときだけでなく、別のページから戻ってきた場合（キャッシュからページが復元された場合）にも発生します。

一般的なonloadイベントはキャッシュからページが表示される際には発火しませんが、onpageshowイベントはそのようなケースでも必ず実行されるという特徴があります。そのため、「戻る」ボタンでページに戻ったユーザーに対して何らかの処理を行いたい場合に特に便利です。

サンプルコード

以下のコードを実行して、onpageshow属性の動作を確認してみましょう。

<!DOCTYPE html>
<html>
   <body onpageshow = "display()">
      <h2>Tutorialspoint</h2>
      <p>Simply Easy Learning</p>
      <script>
         function display() {
            alert("おかえりなさい！");
         }
      </script>
   </body>
</html>

コードの解説

この例では、body要素にonpageshow属性を設定し、ページが表示されると同時にdisplay()関数が呼び出されるようにしています。関数内ではalert()を使ってメッセージを表示する処理を行っています。

実際にブラウザでこのページを開くとアラートが表示され、その後ほかのページへ移動して「戻る」ボタンで再びこのページに戻ると、再度アラートが表示されることが確認できます。このように、onpageshow属性を活用することで、ページ表示のタイミングに合わせた柔軟な処理を実装できます。

  1. HTMLのscript要素におけるcharset属性の使い方を解説

    script要素のcharset属性とは <script>要素のcharset属性は、外部スクリプトファイルで使用する文字エンコーディング（文字セット）を指定するための属性です。外部ファイル内に日本語などのマルチバイト文字が含まれる場合に、文字化けを防いで正しく表示するために利用されてきました。 なお、charset属性はHTML5では廃止された属性であり、現在ではサーバー側のHTTPヘッダーや<meta>タグによって文字コードを指定するのが一般的です。歴史的な仕様やレガシーコードの理解として押さえておきましょう。 構文 <script charset="

  2. HTMLのonpageshowイベント属性とは？使い方をサンプルコード付きで解説

    HTMLのonpageshowイベント属性は、ユーザーがWebページへ移動（ナビゲート）したときに発生するイベントです。ページが最初に読み込まれたときはもちろん、ブラウザの「戻る」ボタンなどでキャッシュからページが再表示されたときにも発火する点が大きな特徴です。 構文 onpageshowイベント属性の基本構文は次のとおりです。 <body onpageshow="script"></body> HTML onpageshowイベント属性のサンプル ここでは、ページが表示されたタイミングでアラートを表示するシンプルな例を紹介します。 サンプルコード