window.history の詳細
window.historyは、ブラウザの履歴を表すJavaScriptオブジェクトです。開発者がブラウザ履歴の操作やナビゲーションを可能にする、いくつかのメソッドとプロパティを提供しています。
window.history オブジェクトの属性には以下が含まれます
- length:ブラウザ履歴内のページの数
- 状態: pushState() または replaceState() 関数によって設定された、現在のページの状態オブジェクトを返します。
window.history オブジェクトのメソッドには次のようなものがあります。
- back():ブラウザの閲覧履歴から直前のページを読み込む。
- forward():履歴の次のページを読み込みます。
- go():履歴から特定のページを読み込み、現在のページからのオフセットを表す数値をパラメータとして渡すことができる。
それらのメソッドとプロパティに加えて、window.history オブジェクトには 2 つの重要なメソッドがあります。
- pushState()メソッドは、新しい状態をブラウザの履歴に追加し、現在のURLを変更しますが、新しいページは読み込まれません。このメソッドは3つのパラメータを受け取ります。状態(ステートオブジェクト)、タイトル(ほとんどの最新のブラウザでは無視されるようになりました)、URL(新しいURL)です。pushState()はブラウザの履歴のみを変更し、ページの再読み込みや読み込みは発生しないことに注意してください。
- replaceState():現在の状態オブジェクトを置き換えます。新しい履歴は追加されません。このメソッドは、state(ステートオブジェクト)、title(タイトル)、url(新しい URL)の 3 つの引数を受け取ります。
これらのメソッドおよびプロパティにより開発者はページをリフレッシュせずに、ブラウザの履歴を変更できるため、フロントエンドルーティングやSPA(シングルページアプリケーション)を実現できます。
セキュリティ上の理由により、ブラウザー履歴の変更は制限されています。ほとんどのブラウザーでは、同一生成元ポリシー下でのみ変更できます。つまり、新しいURLが、現在のページのドメイン名、プロトコル、ポート番号と完全に一致した場合のみ、pushState()とreplaceState()メソッドを使用できます。この制約に違反した場合、ブラウザーはSecurityError例外をスローします。