ページの表示に関するイベント : JavaScript

ページを開いたとき

1. document readystatechange (interractive)
2. document DOMContentLoaded ここで構築完了
3. document readystatechange (complete)
4. window load
5. window pageshow

ページを閉じたとき

1. window beforeunload これ以降は閉じた後
2. window pagehide
3. window unload

IEに関して

• DOMContentLoaded … IE9から
• PageTransitionEvent(pagehide/show) … IE9でも使えない

各イベントについて

開く/閉じる、戻る/進む両方で起こりえる

pagehide, pageshow

ページの表示が切り替わる度に起こる ＊読み込みとは関係がない。表示にのみ関係する。

beforeunload, unload

があると戻る/進むでもページは再読み込みされ、読み込み時の1-5すべてが起こる
（pagehide, pageshow の event.persistedがfalseになる）
その2つがないと、一度読み込まれたページの表示時にはpageshowのみ起こる

pagehide, unload は、閉じたウィンドウでイベントを起こせないが、JSで開いたサブウィンドウを閉じた時に、メインウィンドウでイベントを起こせる。

例

var win1 = window.open("", "_new", "height=10, width=10")

win1.addEventListener("beforeunload", hoge, false)
win1.addEventListener("pagehide", hoge, false)
win1.addEventListener("unload", hoge, false)

function hoge(e){
  alert(e.type)
}

読み込み時に実行したい場合

defer、asyncなどもあるそうで（つい先日しった）私はまだ理解していない。
基本的にdeferでよいと思うが・・・。