window上でのonpopstateイベントのためのイベントハンドラです。

popstateイベントは、アクティブな履歴項目が、 同じdocumentの2つの履歴項目の間で変更される度に発生します。 履歴項目の有効化が、history.pushState()の呼び出しによって作られたもの、 またはhistory.replaceState()の呼び出しによって作用したものである場合、 popstateイベントのstateのプロパティは、履歴項目のstateオブジェクトのコピーを含みます。

history.pushState()、 またはhistory.replaceState()を呼び出すだけであれば、 popstateイベントはトリガされないことに注意してください。 popstateイベントは、 ブラウザの「戻る」ボタンのクリック(またはJavaScriptのhistory.back()呼び出し)のような、 ブラウザのアクションが実行された場合にのみトリガされます。 また、このイベントはユーザーが同じdocumentでの2つの履歴間を行き来した場合のみトリガされます。

文法

window.onpopstate = funcRef;

funcRefには、関数または関数への参照を割り当てます。

popstateイベントについて

例として、http://example.com/example.htmlのページで下記のコードを実行すると、 コメントに記述されている内容がアラートダイアログで表示されます。

window.onpopstate = function(event) {
  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

history.pushState({page: 1}, "title 1", "?page=1");
history.pushState({page: 2}, "title 2", "?page=2");
history.replaceState({page: 3}, "title 3", "?page=3");

history.back();
//アラート: "location: http://example.com/example.html?page=1, state: {"page":1}"

history.back();
//アラート: "location: http://example.com/example.html, state: null

history.go(2);
//アラート: "location: http://example.com/example.html?page=3, state: {"page":3}

元の履歴項目(http://example.com/example.html)はそれに関連するstateオブジェクトを持たないにも関わらず、 2度目のhistory.back()の呼び出しの後に、 その項目を作動(activate)させるとpopstateイベントが発火することに注意してください。(翻訳に自信無し)

例

HTML5 popstate event

注意事項

• window.history
• Manipulating the browser history
• Ajax navigation example

 Back to top