JavaScript History APIの概要

このチュートリアルでは、最新のWebアプリケーション内でユーザーのブラウジング履歴を操作するための強力なツールであるJavaScript History APIを調査します。 主な機能には、履歴エントリの追加、削除、交換、ユーザーエクスペリエンスの向上、ナビゲーションのより多くの制御の提供が含まれます。

重要な概念：

オブジェクト（
• オブジェクトのプロパティ）はAPIのコアであり、ブラウザの履歴スタックと対話する方法を提供します。 history、window、
、
• のような方法履歴をナビゲーションを許可し、ブラウザのバックアンドフォワードボタンを模倣します。 back()移動forward()エントリは前方または後方に移動します（ネガティブgo()に戻ります）。 go(n)n履歴に新しいエントリを追加し、フルページのリロードなしでURLを更新します。 n現在の履歴エントリを変更します
各履歴エントリは、
• イベントからアクセス可能な状態オブジェクトに関連付けられます。pushState() replaceState()
• ナビゲート履歴：popstate

、、およびメソッドは、簡単なナビゲーションを提供します：

back()forward()//「バック」ボタンをクリックするのと同等です。go()

//「フォワード」ボタンをクリックするのに相当します。
• history.back();
// nステップ前方（正のn）または後方（負のn）を移動します。
• history.forward();歴史スタックのエントリの数には、
。
• からアクセスできます history.go(n);
履歴履歴エントリの操作：

history.length

および

は、動的なURLの更新に不可欠です：

新しい履歴エントリを追加します。 pushState()は、エントリに関連付けられたJavaScriptオブジェクトです。 replaceState()（しばしば無視されます）は文字列です。

はアドレスバーに表示されている新しいURLです。

• 現在の履歴エントリを置き換えます。history.pushState(stateObj, title, URL); stateObj titleイベントは、ユーザーが後方または前方にナビゲートするとき、またはURL、
、または
• が呼び出されたときに発火します。 イベントのhistory.replaceState(stateObj, title, URL);プロパティには、対応する履歴エントリからの
が含まれています。

実用アプリケーション：フォトギャラリーの例popstateback()

サムネイルをクリックして表示された画像を変更し、ページをリロードせずにURLを更新するフォトギャラリーを想像してください。 履歴APIはこれを可能にします。 各画像には一意のURLがあり、ブックマークと直接アクセスを可能にします。 画像が選択されたときにpushState()メソッドはURLを更新し、popstateイベントは画像間のナビゲーションを処理します。

さらなる調査：

Mozilla Developer Network（MDN）は、高度なテクニックとブラウザの互換性の詳細をカバーするHistory APIに関する包括的なドキュメントを提供します。

イベントを理解することは、履歴APIを効果的に活用するインタラクティブなアプリケーションを構築するための鍵です。 さらに、このAPIがReactやそのルーティングライブラリなどのJavaScriptフレームワークとどのように統合するかを調べます。

以上がJavaScript History APIの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。