FC2ブログ

Ajaxによる履歴操作

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
となる
スポンサーサイト



コメント

非公開コメント

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック