ブラウザ ウィンドウには、閲覧履歴を保存するために使用される履歴オブジェクトがあります。
現在のウィンドウが 3 つの URL を訪問した場合、履歴オブジェクトには 3 つの項目が含まれ、history.length プロパティは 3 に等しくなります。
履歴オブジェクトは、閲覧履歴間を移動できるようにする一連のメソッドを提供します。
window.history.back(): ブラウザの戻るキーに相当する、前にアクセスしたページに移動します。
window.history.forward(): 次にアクセスしたページに移動します。ブラウザの進むキーに相当します。
window.history.go(num): パラメータとして整数を受け取り、その整数で指定されたページに移動します。たとえば、 go(1) は forward() と同等であり、 go(-1) は back( と同等です。 ）。
window.history.pushState(): HTML5 では、閲覧履歴のレコードを追加および変更するために使用される、window.history.pushState() と window.history.replaceState() という 2 つの新しいメソッドが履歴オブジェクトに追加されます。
注: 1. 移動された位置がアクセス履歴の境界を超える場合、上記の 3 つのメソッドはエラーを報告せず、通知なしで失敗します。
2. セットアップ時には、通常、サーバーに新しい Web ページの送信を再度要求するのではなく、ページはブラウザーのキャッシュから読み込まれます。
window.history.pushState() に注目してみましょう。window.history.pushState(state, title, utl) は、ページ内に履歴エンティティを作成します。履歴に直接追加します。
パラメータの中には次のものがあります。
state: 指定された URL に関連する状態オブジェクト。popstate イベントがトリガーされると、このオブジェクトはコールバック関数に渡されます。このオブジェクトが必要ない場合は、ここに null を入力できます。
title: 新しいページのタイトルですが、現在すべてのブラウザはこの値を無視するため、ここに null を入力できます。
url: 新しい URL は、現在のページと同じドメイン内にある必要があります。ブラウザのアドレス バーにこの URL が表示されます。
注: PushState メソッドはページの更新をトリガーしません。履歴オブジェクトが変更され、アドレス バーが反応するだけです。
実装例:HTML5 は、次のように Android のリターン キー メソッドをリッスンしてインターセプトします。
1.popstateイベントを聞く
window.addEventListener(popstate, function(){ //doSomething}, false)2. デフォルトの戻り操作をキャンセルします。つまり、戻りキーを傍受するためにリッスンします。元の履歴エンティティの代わりに空の履歴エンティティを追加します。
window.history.pushState(null, null, #);
例：
<!DOCTYPE html><html> <meta name=viewport content=width=device-width> <script type=text/javascript> var count = 0; window.history.pushState(null, null, #); (popstate, function(e) { window.history.pushState(null, null, #); document.getElementById('logView').innerHTML = ユーザーのクリック return + (++count) }) </script><body> <p id=logView>test</p></body></html>以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。