導(dǎo)入
JavaScript History API は、ブラウザのセッション履歴 と対話できるようにする Web API の一部です。 履歴スタックをナビゲート、操作、制御するためのメソッドとプロパティを提供し、開発者がページ全體をリロードすることなく、より動(dòng)的でインタラクティブなユーザー エクスペリエンスを作成できるようにします。
JavaScript History API の主な機(jī)能
- history.back()
- history.forward()
- history.go(n)
- history.pushState()
- history.replaceState()
History.back() メソッド
このメソッドは、ブラウザを セッション履歴の前のページに移動(dòng)します。これはブラウザの戻るボタンに相當(dāng)します。これは、ブラウザの履歴スタックに前のページが存在する場(chǎng)合にのみ機(jī)能します。
例:
<!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>
出力:
「戻る」ボタンをクリックすると、履歴スタックに前のページが存在する場(chǎng)合、ユーザーは前のページに移動(dòng)します。
History.forward() メソッド
このメソッドは、ブラウザを セッション履歴の次のページ (ブラウザの進(jìn)むボタンに相當(dāng)) に移動(dòng)します。これは、ブラウザの履歴スタックに次のページが存在する場(chǎng)合にのみ機(jī)能します。
例:
<!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>
出力:
履歴スタックに存在する場(chǎng)合、[進(jìn)む] ボタンをクリックすると次のページに移動(dòng)します。
History.go() メソッド
このメソッドは、ブラウザ スタック內(nèi)の特定のポイントに移動(dòng)するために使用されます。 引數(shù) 'n' を受け取り、履歴スタック內(nèi)で移動(dòng)するページの番號(hào)を指定します。
引數(shù)「n」は次の値を受け入れることができます:
-
Positive 'n' は、ユーザーをスタック內(nèi)で 前方 に移動(dòng)します。
-
Negative 'n' は、ユーザーをスタック內(nèi)で 後方 に移動(dòng)します。
- 「n」の値が 0 の場(chǎng)合、現(xiàn)在のページをリロードします。
History.pushState() メソッド
このメソッドは、現(xiàn)在のセッションの履歴スタックに新しいエントリを追加するために使用されます。つまり、現(xiàn)在のブラウザ タブでアクセスしたすべてのページのコレクションです。
例:
ボタン要素を作成し、それにクリック ハンドラーを割り當(dāng)てます。ハンドラー內(nèi)で、pushState() メソッドを呼び出します。これにより、現(xiàn)在のページとは異なる URL で新しいエントリが追加されます。
// HTML ->
<button>Call pushState()</button>
// JavaScript ->
var button = document.querySelector('button');
button.onClick = function() {
history.pushState(null, ' ', 'some-page');
}
出力:
現(xiàn)在の URL は - https://www.codeguage.com/courses/js/examples/pushstate
ボタンをクリックすると、URL が次のように変わります - https://www.codeguage.com/courses/js/examples/some-page
これにより、現(xiàn)在のセッションの履歴に新しいエントリが追加されたことが確認(rèn)されます。また、ブラウザのアドレス バーの URL も変更されます。また、ブラウザの 左上隅 の戻る矢印もアクティブになっていることもわかります。これをクリックすると、
に戻ります。
https://www.codeguage.com/courses/js/examples/pushstate
知っておくべき非常に重要なことの 1 つは、pushState() は URL が実際に存在するかどうかさえ確認(rèn)せずに変更するということです。これは、pushState() の目的はウェブページを読み込むことではなく、履歴に新しいエントリを追加するだけであるためです。
History.replaceState() メソッド
このメソッドは、現(xiàn)在のセッションの履歴スタック內(nèi)の現(xiàn)在のエントリを新しいエントリに置き換えます。
例:
前と同様に、ボタンにクリック ハンドラーが設(shè)定されています。ただし、今回はハンドラー內(nèi)で replaceState() を呼び出して、現(xiàn)在の履歴エントリを新しい履歴エントリに置き換えます。
<!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>
出力:
現(xiàn)在の URL は -
https://www.codeguage.com/courses/js/examples/replacestate
ボタンをクリックすると、URL が -
に変わります。
https://www.codeguage.com/courses/js/examples/some-page
ブラウザの URL が置き換えられました。左上隅の 戻る矢印キーがアクティブになっていないことがわかります。新しいエントリが追加されたことが確認(rèn)できます。履歴スタックに追加されていません。現(xiàn)在のエントリを新しいエントリに置き換えただけです1 つ.
それで終わりです! JavaScript History API と、そのさまざまなユーティリティを使用してアプリケーションに組み込む方法について學(xué)習(xí)しました。
LinkedIn で私とつながりましょう :- Linkedin
素晴らしいプロジェクトについては私の GitHub をチェックしてください :- Github
私の個(gè)人ポートフォリオを見る :- Aryan のポートフォリオ
以上がJavaScript 履歴 APIの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。