Windows popstateイベントは、URLがpushstateで変更されるたびに発生します。これは、ブラウザーの戻る/進むボタンでも発生するため、ajaxまたは使用しているものでサイトのコンテンツを変更するために使用する必要があるイベントです。一部のブラウザでは、最初のページの読み込み時にも起動するため、それも確認する必要があります。
イベントハンドラーなどを使用して本格的なネイティブJSの例を作成する時間は実際にはありませんが、jQueryの簡単なバージョンを次に示します。
var checkForFirstLoad = true;
$(window).on({
load: function() {
checkForFirstLoad = false;
},
popstate:function(e) {
if (checkForFirstLoad) {
updatePage(e.originalEvent.state!=null ? e.originalEvent.state.page : document.location.pathname, true);
}else{
checkForFirstLoad = false;
}
}
});
function updatePage(pageURI, type, switchContent) {
if (!type) {
history.pushState({ page: pageURI }, page, pageURI);
}
if (switchContent) {
//replace site content etc.
}
}
これは非常に単純な例であり、ブラウザサポートの確認、クリックされたリンクが現在のURLと同じhrefであるかどうかの確認、異なるURLの認識など、さらに多くのことが行われています。オブジェクトリテラルには数千行のコードがあるため、popstateがどのように機能し、独自のコードでどのように使用するかを正確に把握する必要があります。