備忘録的プログラミングリファレンス

pagehide ( onpagehide )イベント

 pagehide ( onpagehide )イベントは、Webページを移動するやブラウザを閉じるなどWebページが遷移すると発生するイベントです。pagehideイベントはページをキャッシュします。

 ページを遷移させる方法には、例えば、リンクをクリックする、ページを更新する、フォームを送信する、ブラウザウィンドウを閉じるなどがあります。

pagehide ( onpagehide )イベント
document.body.addEventListener( "pagehide", ()=>{
	console.log( event );
}, false );

詳しくは Example を参照してください

 pagehide イベントは pageshow イベントの対です。

 詳しくは以下のpagehide ( onpagehide )イベントについてを参照してください。

ページ内 Index

pagehide ( onpagehide )イベントについて

 pagehide ( onpagehide )イベントはページを遷移すると発生するイベントです。

 似たイベントに unload イベントがあります。pagehide イベントはページをキャッシュしますが、onunload イベントはページをキャッシュしません。

 ページがキャッシュか/否かは、PageTransitionEvent.persisted プロパティで確認できます。persisted プロパティはキャッシュの有無を Bool 値で返します。キャッシュされている場合は true。キャッシュではない場合は false を返します。

 unload イベントに比べて、適応されるエレメントに違いがあります。 pagehide イベントは Window<body> エレメントで使うことができますが、unload イベントは WindowDocument各エレメントで使うことができます。

構文(Syntax)

in HTML

<tagelement onpagehide="function()">

in JavaScript

object.onpagehide = function(){ };

object.addEventListener("pagehide", script_);

備考(Remarks)

BubblesNo
CancelableNo
InterfaceWindowEventHandlersミックスイン
Supported HTML ElementsWindow、<body>

 WindowEventHandlers ミックスインで定義されおり、Window インターフェイス、HTMLBodyElement インターフェイスで利用できます。

Example

 反応はあるのですが、ページ自体がキャッシュのためか上手く動きません。参考程度にしてください。

確認ボタンをクリックしてください。以下のHTML,CSS,Scriptコード例が実行されます。