HTML5 の歴史の新機能、pushState、replaceState、および 2 つの _html5 チュートリアル スキルの違い

DOM の window オブジェクトは、window.history メソッドを通じてブラウザ履歴へのアクセスを提供し、ユーザーのアクセス レコード内を前後に移動できるようにします。

HTML5 からは、この履歴スタックの操作を開始できるようになります。

1. 履歴

ユーザーの履歴を進めるには、back()、forward()、および go() メソッドを使用します。戻る

進むと戻る

戻る:

コードをコピー

コードは次のとおりです:

window.history.back();

このメソッドは、ユーザーがブラウザ ツールバーの [戻る] キーをクリックしたように動作します。

同様に、次のメソッドを使用してユーザーの転送動作を生成することもできます:

コードをコピー

コードは次のとおりです:

window.history.forward();

履歴内の特定の位置に移動します

go() メソッドを使用して、セッション履歴から特定のページをロードできます。

1 ページ前に移動します:

コードをコピーします

コードは次のとおりです。

window.history.go(-1);

1 ページ進む:

コードをコピーします

コードは次のとおりです:

window.history.go(1);

同様に、複数のページに進むか戻ることができます。

ブラウザ履歴の長さプロパティを確認することで、履歴スタック内の総ページ数を確認することもできます。

コードをコピーします

コードは次のとおりです:

var numberOfEntries = window.history .length;

注: IE は、go() メソッドへの URL パラメーターの受け渡しをサポートしています。

2. 履歴エンティティの追加と変更

Gecko2 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 以降に導入

HTML5 では、履歴エンティティの追加と変更を可能にする 2 つのメソッドhistory.pushState() とhistory.replaceState() が導入されました。同時に、これらのメソッドは window.onpostate イベントでも機能します。

history.pushState() メソッドを使用してリファラーを変更します。このメソッドは、状態を変更した後に xmlhttpRequest オブジェクトに対して作成された http ヘッダーで使用できます。このリファラーは、XMLHttpRequest を作成するときのドキュメントの URL になります。

pushState は、現在のページのレコードを履歴に追加するために使用されますが、replaceState は、pushState とまったく同じように使用されます。唯一の違いは、履歴内の現在のページのレコードを変更するために使用されることです。

例

http://mozilla.org/foo.html ページが JS を実行するとします

コピーcode

コードは次のとおりです:

var stateObj = { foo: "bar" }; History.pushState(stateObj, "page 2", "bar. html ");

このメソッドにより、URL アドレス バーに http://mozilla.org/bar.html が表示されますが、このページが存在する場合でも、ブラウザは bar.html ページをロードしません。

ここでも、ユーザーが http://google.com にアクセスし続け、クリックして戻ると仮定します。このとき、URL アドレス バーは http://mozilla.org/bar.html となり、ページは Popstate イベント (chrome) を取得します。この状態オブジェクトには stateObj のコピーが含まれます。このページは foo.html のように見えます。

この時点で、もう一度クリックすると、URL は http://mozilla.org/foo.html になり、ドキュメントは別の Popstate イベントと null 状態オブジェクトを取得します。この返品アクションによってドキュメントの内容は変更されません。 (しばらくしてから...chrome をロードしてみてください)

pushState メソッド

pushState() には 3 つのパラメータがあります: state object, title (現在は無視され処理されません)、URL (オプション)。具体的な詳細:

· 状態オブジェクト – 状態オブジェクトは JavaScript オブジェクトであり、pushState() メソッドによって作成された新しい履歴エンティティに関連します。履歴に挿入するエントリに関する情報を保存するために使用されます。状態オブジェクトには任意の Json 文字列を指定できます。 Firefox はユーザーのハードディスクを使用して状態オブジェクトにアクセスするため、このオブジェクトの最大ストレージ容量は 640k です。この値より大きい場合、pushState() メソッドは例外をスローします。ストレージ用にさらに多くのスペースが必要な場合は、ローカル ストレージを使用してください。

・title - Firefox は現在このパラメータを無視しますが、将来的には使用される可能性があります。現時点でこれを使用する最も安全な方法は、将来の変更を防ぐために空の文字列を渡すことです。または、状態を表す短いタイトルを渡すこともできます

· URL - このパラメーターは、新しい履歴エンティティの URL を渡すために使用されます。pushState() メソッドを呼び出した後、ブラウザーはこの URL をロードしないことに注意してください。ただし、しばらくするとこの URL をロードしようとする可能性があります。たとえば、ユーザーがブラウザを再起動した後、新しい URL は絶対パスではない可能性があります。相対パスの場合は、既存の URL からの相対パスになります。新しい URL は既存の URL と同じドメイン内にある必要があります。そうでない場合、pushState() は例外をスローします。このパラメータはオプションです。空の場合は、ドキュメントの現在の URL に設定されます。

ある意味では、pushState() メソッドの呼び出しは window.location = "#foo" の設定に非常に似ていますが、どちらも現在のドキュメントに関連付けられた別の履歴エンティティを作成してアクティブ化しますが、pushState() メソッドは同じです。 )次のような利点もあります。

新しい URL は、現在の URL と同じドメイン内の任意の URL にすることができます。対照的に、ハッシュを設定するだけの場合、window.location は同じドキュメント内に残ります。

必要がなければ、URL を変更する必要はありません。対照的に、 window.location = "#foo"; を設定すると、新しい履歴エンティティのみが生成されます。現在のハッシュが #foo

でない場合は、任意のデータを新しい履歴エンティティに関連付けることができます。ハッシュベースのメソッドを使用すると、すべての関連データを短い文字列にエンコードする必要があります。

古い URL と新しい URL のハッシュが異なるだけであっても、pushState() メソッドではハッシュ変更時間が発生しないことに注意してください。

replaceState() メソッド

history.replaceState() は、replaceState() が変更に使用されることを除いて、pushState() とほぼ同じように使用されます。新しい履歴エンティティを作成する代わりに、現在の履歴エンティティを作成します。このメソッドは、特定のユーザー アクションに応じて状態オブジェクトまたは現在の履歴エンティティを更新する必要がある場合に、状態オブジェクトまたは現在の履歴エンティティの URL を更新するために使用すると便利です。

popstate イベント

履歴エンティティが変更されると、popstate イベントが発生します。履歴エンティティが PushState メソッドと replaceState メソッドによって生成された場合、popstate イベントの state 属性には、履歴エンティティからの state オブジェクトのコピーが含まれます

詳細については、window.onpopstate

を参照してください。現在の状態を読み取る

既存の状態を読み取る

ページが読み込まれると、空ではない状態オブジェクトが含まれる場合があります。これは、ページが状態オブジェクトを設定した後 (pushState または replaceState を使用)、ユーザーがブラウザを再起動したときに発生することがあります。ページがリロードされると、ページは onload イベントを受け取りますが、popstate イベントは受け取りません。ただし、history.state プロパティを読み取る場合は、popstate イベントの発生後に状態オブジェクトを取得します。
var currentState =history.state;
ブラウザ:

でテスト済みです。 HTML5 ブラウザ

Chrome 8、9、10
Firefox 4
Safari 5
Opera 11
Safari iOS 4.3
HTML4 ブラウザ

IE6,7,8,9
Firefox 3
Opera 10
Safari 4
バージョン 4.3 より前の Safari iOS

pushState およびreplaceState Difference

history.pushState(状態, タイトル, URL)

--------- -------------------------------------------------- - ---------

現在の URL とhistory.state を履歴に追加し、現在の URL を新しい状態と URL に置き換えます。ページが更新されることはありません。

state: ジャンプ先の URL に対応する状態情報。

title：可以不傳

url：要跳到的URL位址，不能跨域。

history.replaceState(state, title, url)

---------------------------- -------------------------------------------------- --

用新的state和URL取代目前。不會造成頁面刷新。

state：與要跳到的URL對應的狀態資訊。

title：可以不傳

url：要跳到的URL位址，不能跨域。

-------------------------------------------- ------------------------------------

兩者看似沒有差別，其實差別很大的，pushState是添加歷史記錄的，而replaceState是不添加的。