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

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

HTMLのonpageshowイベント属性は、ユーザーがWebページへ移動（ナビゲート）したときに発生するイベントです。ページが最初に読み込まれたときはもちろん、ブラウザの「戻る」ボタンなどでキャッシュからページが再表示されたときにも発火する点が大きな特徴です。

構文

onpageshowイベント属性の基本構文は次のとおりです。

<body onpageshow="script"></body>

HTML onpageshowイベント属性のサンプル

ここでは、ページが表示されたタイミングでアラートを表示するシンプルな例を紹介します。

サンプルコード

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
        text-align: center;
    }
</style>
<body onpageshow="showFn()">
<h1>HTML onpageshow Event Attribute Demo</h1>
<script>
    function showFn() {
        alert("Hey! you are on homepage");
    }
</script>
</body>
</html>

実行結果

上記のコードをブラウザで開くと、ページが表示された瞬間にアラートボックスが現れます。

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

アラートボックスの「OK」ボタンをクリックすると、HTMLドキュメントの内容が表示されます。

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

補足：onloadイベントとの違い

よく似たイベントにonloadがありますが、両者には違いがあります。onloadはページが完全に読み込まれたときに一度だけ発火するのに対し、onpageshowはキャッシュからページが復元された場合（たとえば「戻る」ボタンの操作）にも発火します。そのため、戻る操作の際にもJavaScriptの処理を実行したいケースでは、onpageshowイベント属性が適しています。

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

    HTMLのondragenterイベント属性は、ドラッグ可能な要素やテキストが、ドキュメント内の有効なドロップターゲット（ドロップ先）に入った瞬間に発生するイベントです。ドラッグ＆ドロップ操作のUIを作成する際に、ドロップ領域をハイライト表示するなど、ユーザーへの視覚的なフィードバックを提供したい場合によく活用されます。構文（Syntax）ondragenterイベント属性の基本的な書き方は以下のとおりです。<tagname ondragenter="script"></tagname>対象となるタグの属性として「ondragenter」を指定し、値

  2. HTML ondragendイベント属性の使い方を徹底解説

    ondragendイベント属性とはHTMLのondragendイベント属性は、HTMLドキュメント内でユーザーが要素やテキストのドラッグを終了した時点で発生するイベントです。ドラッグ&ドロップ操作の一連の流れの最後に実行されるため、ドラッグ完了後の処理(メッセージの表示や状態の更新など)を実装するのに便利です。なお、ondragendイベントはドラッグ元の要素に対して発生する点に注意してください。ドロップ先の要素で発生するのは「drop」イベントであり、役割が異なります。構文ondragendイベント属性の基本的な構文は以下のとおりです。<tagname ondragend=&q