HTML DOMのPageTransitionEvent（ページ遷移イベント）とは？プロパティ・種類・サンプルコードを解説
DOMのPageTransitionEventは、ユーザーがWebページ間を移動（ナビゲーション）した際に発生するイベントです。ページの表示・離脱を検知できるため、キャッシュの状態確認やページ遷移時の処理を実装したい場合に活用できます。
PageTransitionEventオブジェクトのプロパティ
PageTransitionEventオブジェクトには、以下のプロパティが用意されています。
| プロパティ | 説明 |
|---|---|
persisted | Webページがブラウザにキャッシュされているかどうかに応じて、trueまたはfalseを返します。 |
PageTransitionEventオブジェクトに属するイベントの種類
PageTransitionEventには、次の2種類のイベントが含まれます。
| イベント | 説明 |
|---|---|
pagehide | ユーザーが現在のWebページから別のページへ移動した（ページを離れた）ときに発生します。 |
pageshow | ユーザーがWebページにアクセスした（ページが表示された）ときに発生します。 |
実装例
ここで、PageTransitionEventオブジェクトを使った具体的なサンプルコードを見てみましょう。
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
color:#fff;
background: #ff7f5094;
height:100%;
}
.btn{
background:#0197F6;
border:none;
height:2rem;
border-radius:2px;
width:35%;
margin:2rem auto;
display:block;
color:#fff;
outline:none;
cursor:pointer;
}
</style>
</head>
<body>
<h1>DOM PageTransitionEvent Event Demo</h1>
<button onclick="checkPage(event)" class="btn">Click me</button>
<script>
function checkPage(event) {
if (event.persisted) {
confirm("Page was cached by the browser");
} else {
confirm("Page was not cached by the browser");
}
}
</script>
</body>
</html>
コードの解説
このサンプルでは、ボタンがクリックされると checkPage() 関数が呼び出されます。関数内ではイベントオブジェクトの persisted プロパティを判定し、ページがブラウザによってキャッシュされている場合は「Page was cached by the browser」、されていない場合は「Page was not cached by the browser」というメッセージを確認ダイアログで表示します。
実行結果
上記のコードを実行すると、次のような画面が表示されます。
「Click me」ボタンをクリックすると、そのページがブラウザにキャッシュされているかどうかを確認できます。
まとめ
- PageTransitionEventは、ページ間の移動時に発生するイベントである。
pagehideはページから離れるとき、pageshowはページが表示されるときに発火する。persistedプロパティを使うことで、ページがキャッシュから読み込まれたかどうかを判定できる。
-
HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説
HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注
-
HTML DOM Event typeプロパティとは？イベントの種類を取得する方法を実例付きで解説
HTML DOM Event typeプロパティとはHTML DOMのEvent typeプロパティは、発生したイベントの種類に対応する文字列を返すプロパティです。「click」「keypress」「load」「touchend」など、さまざまなイベントタイプを取得できます。構文イベントの種類を文字列として取得するには、以下のように記述します。event.typeそれでは、Event typeプロパティの具体的な使用例を見ていきましょう。使用例以下のサンプルでは、赤い円形の要素に対して「クリック」または「タッチ」が行われた際に、event.typeでイベントの種類を判定しています。イベントの種