ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript 履歴 API
JavaScript 履歴 API
- Patricia Arquetteオリジナル
- 2024-12-25 18:06:13959ブラウズ
導入
JavaScript History API は、ブラウザのセッション履歴 と対話できるようにする Web API の一部です。 履歴スタックをナビゲート、操作、制御するためのメソッドとプロパティを提供し、開発者がページ全体をリロードすることなく、より動的でインタラクティブなユーザー エクスペリエンスを作成できるようにします。
JavaScript History API の主な機能
- history.back()
- history.forward()
- history.go(n)
- history.pushState()
- history.replaceState()
History.back() メソッド
このメソッドは、ブラウザを セッション履歴の前のページに移動します。これはブラウザの戻るボタンに相当します。これは、ブラウザの履歴スタックに前のページが存在する場合にのみ機能します。
例:
<!DOCTYPE html> <html> <body> <h1>The Window History Object</h1> <h2>The history.back() Method</h2> <button onclick="history.back()">Go Back</button> </body> </html>
出力:
「戻る」ボタンをクリックすると、履歴スタックに前のページが存在する場合、ユーザーは前のページに移動します。
History.forward() メソッド
このメソッドは、ブラウザを セッション履歴の次のページ (ブラウザの進むボタンに相当) に移動します。これは、ブラウザの履歴スタックに次のページが存在する場合にのみ機能します。
例:
<!DOCTYPE html> <html> <body> <h1>The Window History Object</h1> <h2>The history.forward Method</h2> <button onclick="history.forward()">Go Forward</button> </body> </html>
出力:
履歴スタックに存在する場合、[進む] ボタンをクリックすると次のページに移動します。
History.go() メソッド
このメソッドは、ブラウザ スタック内の特定のポイントに移動するために使用されます。 引数 'n' を受け取り、履歴スタック内で移動するページの番号を指定します。
引数「n」は次の値を受け入れることができます:
- Positive 'n' は、ユーザーをスタック内で 前方 に移動します。
- Negative 'n' は、ユーザーをスタック内で 後方 に移動します。
- 「n」の値が 0 の場合、現在のページをリロードします。
History.pushState() メソッド
このメソッドは、現在のセッションの履歴スタックに新しいエントリを追加するために使用されます。つまり、現在のブラウザ タブでアクセスしたすべてのページのコレクションです。
例:
ボタン要素を作成し、それにクリック ハンドラーを割り当てます。ハンドラー内で、pushState() メソッドを呼び出します。これにより、現在のページとは異なる URL で新しいエントリが追加されます。
// HTML ->
<button>Call pushState()</button>
// JavaScript ->
var button = document.querySelector('button');
button.onClick = function() {
history.pushState(null, ' ', 'some-page');
}
出力:
現在の URL は - https://www.codeguage.com/courses/js/examples/pushstate
ボタンをクリックすると、URL が次のように変わります - https://www.codeguage.com/courses/js/examples/some-page
これにより、現在のセッションの履歴に新しいエントリが追加されたことが確認されます。また、ブラウザのアドレス バーの URL も変更されます。また、ブラウザの 左上隅 の戻る矢印もアクティブになっていることもわかります。これをクリックすると、
に戻ります。
https://www.codeguage.com/courses/js/examples/pushstate
知っておくべき非常に重要なことの 1 つは、pushState() は URL が実際に存在するかどうかさえ確認せずに変更するということです。これは、pushState() の目的はウェブページを読み込むことではなく、履歴に新しいエントリを追加するだけであるためです。
History.replaceState() メソッド
このメソッドは、現在のセッションの履歴スタック内の現在のエントリを新しいエントリに置き換えます。
例:
前と同様に、ボタンにクリック ハンドラーが設定されています。ただし、今回はハンドラー内で replaceState() を呼び出して、現在の履歴エントリを新しい履歴エントリに置き換えます。
<!DOCTYPE html> <html> <body> <h1>The Window History Object</h1> <h2>The history.back() Method</h2> <button onclick="history.back()">Go Back</button> </body> </html>
出力:
現在の URL は -
https://www.codeguage.com/courses/js/examples/replacestate
ボタンをクリックすると、URL が -
に変わります。
https://www.codeguage.com/courses/js/examples/some-page
ブラウザの URL が置き換えられました。左上隅の 戻る矢印キーがアクティブになっていないことがわかります。新しいエントリが追加されたことが確認できます。履歴スタックに追加されていません。現在のエントリを新しいエントリに置き換えただけです1 つ.
それで終わりです! JavaScript History API と、そのさまざまなユーティリティを使用してアプリケーションに組み込む方法について学習しました。
LinkedIn で私とつながりましょう :- Linkedin
素晴らしいプロジェクトについては私の GitHub をチェックしてください :- Github
私の個人ポートフォリオを見る :- Aryan のポートフォリオ
以上がJavaScript 履歴 APIの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。