historyオブジェクトに関する知識点の簡単な整理

1730 ワード

参考資料:MDN
HTML 5から、historyスタック内のコンテンツを操作できます.
1.historyでジャンプ
back(),forward(),go()メソッドを使用して,ユーザの履歴における前進と後退を完了する.
1.1前後にジャンプ
バックジャンプ:
window.history.back()
ユーザが後退ボタンをクリックする効果と一致する.試しに:次のURLを開きます:w 3 schoolページの中のリンクをクリックして、例えば“JavaScriptを勉強し始めます”のこのリンク.ページがジャンプしていることがわかります.コントロールパネルを開き、consolewindow.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は、現在の履歴ステータスオブジェクトのコピーを含む.
終わります.