Ajaxによる履歴操作には
HistoryAPIで
履歴の追加
戻るボタンが押されたときの処理の登録
が必要になる
まず、履歴の追加について
履歴の追加は、
history.pushState()
で行う
このメソッドの書式は
history.pushState(data, title, url)
引数の意味は
data
新しい履歴と関連付けられる任意のデータ
title
新しい履歴のタイトル
url
新しい履歴のURL
この
history.pushState()
は、履歴を追加し
ページのURLを変更する
しかし、ページのURL変更だけで、読み込みまではしない
あと、urlには、同一ドメインを指定しないとダメ
つまり、他のサイトのドメインとかはダメ
つぎに、戻るボタンが押されたときのイベントについて
履歴を追加しただけでは、当然のことだけど
前の画面には戻れない
戻るボタンが押されると
イベントが発生する
このイベントに応じて、画面を切り替える処理を実装する
ちなみに、戻ると進むボタンをクリックしたときのイベントは同じで
発生するイベントは
popstateイベントになる
以下は、戻るボタンが押されたときのイベント処理
つまり、popstateイベント処理
の書式
window.addEventListener(“popstate”,fuction(event){
画面を切り替える処理
event.stateで関連っけたオブジェクトを得られる
});
event.stateプロパティで
history.pushState()
の引数に指定したオブジェクトを得られる
この
stateを使い、画面を再構築できるように工夫する必要がある
history.stateプロパティをチェックすることで
現在表示しているページに関する
stateオブジェクトの値を調べれる
これは、popstateイベント
つまり戻るボタンクリックイベント
を処理してるとき以外でも参照できる
もし、値が設定されてないなら
state==null
となる
Ajaxによる履歴操作には
HistoryAPIで
履歴の追加
戻るボタンが押されたときの処理の登録
が必要になる
まず、履歴の追加について
履歴の追加は、
history.pushState()
で行う
このメソッドの書式は
history.pushState(data, title, url)
引数の意味は
data
新しい履歴と関連付けられる任意のデータ
title
新しい履歴のタイトル
url
新しい履歴のURL
この
history.pushState()
は、履歴を追加し
ページのURLを変更する
しかし、ページのURL変更だけで、読み込みまではしない
あと、urlには、同一ドメインを指定しないとダメ
つまり、他のサイトのドメインとかはダメ
つぎに、戻るボタンが押されたときのイベントについて
履歴を追加しただけでは、当然のことだけど
前の画面には戻れない
戻るボタンが押されると
イベントが発生する
このイベントに応じて、画面を切り替える処理を実装する
ちなみに、戻ると進むボタンをクリックしたときのイベントは同じで
発生するイベントは
popstateイベントになる
以下は、戻るボタンが押されたときのイベント処理
つまり、popstateイベント処理
の書式
window.addEventListener(“popstate”,fuction(event){
画面を切り替える処理
event.stateで関連っけたオブジェクトを得られる
});
event.stateプロパティで
history.pushState()
の引数に指定したオブジェクトを得られる
この
stateを使い、画面を再構築できるように工夫する必要がある
history.stateプロパティをチェックすることで
現在表示しているページに関する
stateオブジェクトの値を調べれる
これは、popstateイベント
つまり戻るボタンクリックイベント
を処理してるとき以外でも参照できる
もし、値が設定されてないなら
state==null
となる