historyオブジェクトに関する知識点の簡単な整理
1730 ワード
参考資料:MDN
HTML 5から、historyスタック内のコンテンツを操作できます.
1.historyでジャンプ
back(),forward(),go()メソッドを使用して,ユーザの履歴における前進と後退を完了する.
1.1前後にジャンプ
バックジャンプ:
window.history.back()
ユーザが後退ボタンをクリックする効果と一致する.試しに:次のURLを開きます:w 3 schoolページの中のリンクをクリックして、例えば“JavaScriptを勉強し始めます”のこのリンク.ページがジャンプしていることがわかります.コントロールパネルを開き、
1.2 historyで指定したポイントにジャンプ
go()でセッション履歴指定位置のジャンプを行うことができます.現在のページとの相対的な位置でマークします.現在のページのタグは0です.1ページ前に移動:
window.history.go(1)
ページを1つ後ろに移動します.
window.history.go(-1)
2つのページを後ろに移動します.
window.history.go(-2)
2.履歴の内容の追加と変更
2.1 pushState()
2.1.1ステータスオブジェクト
ステータスオブジェクトstateはjsオブジェクトであり、
2.1.2タイトル
火狐ブラウザは現在、このパラメータを無視して、空の文字列を渡すことができます.
2.1.3 URL
このパラメータは、新しい履歴URLを定義します.新しいURLは絶対パスである必要はありません.新しいURLが相対パスである場合、現在のURLに対して処理されます.新しいURLは現在のURLと同じソースでなければなりません.
2.2 replaceState()
2.3 popStateイベント
終わります.
HTML 5から、historyスタック内のコンテンツを操作できます.
1.historyでジャンプ
back(),forward(),go()メソッドを使用して,ユーザの履歴における前進と後退を完了する.
1.1前後にジャンプ
バックジャンプ:
window.history.back()
ユーザが後退ボタンをクリックする効果と一致する.試しに:次のURLを開きます:w 3 schoolページの中のリンクをクリックして、例えば“JavaScriptを勉強し始めます”のこのリンク.ページがジャンプしていることがわかります.コントロールパネルを開き、
console
にwindow.history.back()
と入力します.リンクがクリックされていない前のページにページが戻っていることがわかります.次にwindow.history.forward()
と入力すると、ページがまた跳ね返ったことに気づきます.1.2 historyで指定したポイントにジャンプ
go()でセッション履歴指定位置のジャンプを行うことができます.現在のページとの相対的な位置でマークします.現在のページのタグは0です.1ページ前に移動:
window.history.go(1)
ページを1つ後ろに移動します.
window.history.go(-1)
2つのページを後ろに移動します.
window.history.go(-2)
2.履歴の内容の追加と変更
history.pushState()
およびhistory.replaceState()
メソッドを使用して、履歴の内容を追加および変更できます.2.1 pushState()
pushState()
メソッドには、ステータスオブジェクト、タイトル、URLの3つのパラメータが必要です.2.1.1ステータスオブジェクト
ステータスオブジェクトstateはjsオブジェクトであり、
pushState()
によって新しい履歴エントリが作成されます.いつユーザが新しい状態にナビゲートしても、popState
イベントがトリガーされ、このイベントのstate
属性には、履歴エントリ状態オブジェクトのコピーが含まれます.2.1.2タイトル
火狐ブラウザは現在、このパラメータを無視して、空の文字列を渡すことができます.
2.1.3 URL
このパラメータは、新しい履歴URLを定義します.新しいURLは絶対パスである必要はありません.新しいURLが相対パスである場合、現在のURLに対して処理されます.新しいURLは現在のURLと同じソースでなければなりません.
2.2 replaceState()
history.replaceState()
とhistory.pushState()
は似ています.違いは、replaceState()
が新規ではなく現在の履歴を修正することである.2.3 popStateイベント
popState
イベントは、アクティビティの履歴が変化するたびにwindowオブジェクトに渡されます.現在のアクティビティの履歴項目がpushState
によって作成された場合、またはreplaceState
によって変更された場合、popstate
イベントのステータス属性state
は、現在の履歴ステータスオブジェクトのコピーを含む.終わります.