h5 の履歴機能 --pushState、replaceState についての深い理解

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

HTML5から始めて、この履歴スタックの操作を開始できます。

1.History

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

window.history.back();

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

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

window.history.forward();

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

go()メソッドを使用して

からロードすることができますセッション

履歴 特定のページに入ります。 1 ページ前に移動:

window.history.go(-1);

1 ページ前に移動:

window.history.go(1);

同様に、複数のページを前後に進めることができます。

ブラウザ履歴の

length

プロパティをチェックすることで、履歴スタック内の総ページ数を確認することもできます。

var numberOfEntries = window.history.length;

Note:

IEは、URLパラメータをgo()メソッドに渡すことをサポートしています。 2. 履歴エンティティの追加と変更

Gecko2

(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 以降に導入されました HTML5導入 history.pushState( ) と history.replaceState() は、history エンティティの追加と変更を可能にする 2 つのメソッドです。同時に、これらのメソッドは

window.onpostate

イベントで動作します。

使用history.pushState()方法来修改referrer,这种方法可以被用在经过修改状态后而为xmlhttpRequest对象创建的http header中。这个referrer会是创建XMLHttpRequest 时document的URL。

pushState 用于向 history 添加当前页面的记录，而 replaceState 和 pushState 的用法完全一样，唯一的区别就是它用于修改当前页面在 history 中的记录。

例子

假设http://mozilla.org/foo.html页面执行了一下JS

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的copy。这个页面看起来像foo.html。+

この時点で、もう一度戻るをクリックすると、URL は http://mozilla.org/foo.html になり、document は別の popstate イベントと null state オブジェクトを取得します。この返品アクションによってドキュメントの内容は変更されません。 (しばらくしてから...chromeをロードしてみてください) パラメータは 3 つあります : state オブジェクト、タイトル ( は現在無視され、処理されません ) 、 URL ( オプション ) 。具体的な詳細:

· stateobject – stateオブジェクトはJavaScriptオブジェクトに関連しています。 pushState() メソッドが作成されました新しい 歴史エンティティによる。履歴 レコードに挿入するエントリに関する情報を保存するために使用されます。 State オブジェクトは、任意の Jsonstring にすることができます。 firefox はユーザーのハードドライブを使用して state オブジェクトにアクセスするため、このオブジェクトの最大ストレージ容量は

640k です。この数値

の値より大きい場合、 pushState() メソッドは例外をスローします。ストレージ用にさらに多くのスペースが必要な場合は、ローカル ストレージを使用してください。 · — Firefox は現在このパラメータを無視していますが、将来的には使用される可能性があります。現時点でこれを使用する最も安全な方法は、将来の変更を防ぐために空の文字列を渡すことです。または、状態を表す短いタイトルを渡すこともできます

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

ある意味、pushState()メソッドを呼び出すことは、window.location = “#foo”,両方を設定するのとよく似ていますs とアクティブ化現在の document に関連付けられた別の history エンティティですが、pushState() には追加の利点もあります:

l new url はい、任意のURLです対照的に、hashのみを設定した場合、window.locationは同じdocument内に残ります。 l

必要がなければ、

urlを変更する必要はありません。対照的に、 window.location = "#foo"; と設定すると、現在の hash が #foo でない場合にのみ、新しい history エンティティが生成されます。

l 新しい history エンティティに任意のデータを関連付けることができます。 ハッシュ ベースのアプローチを使用すると、すべての関連データを短い文字列にエンコードする必要があります。

pushState()メソッドは、古いurlが単にhash違うだけであっても、hashchange時間を発生させないことに注意してください。

replaceState()メソッド

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

ポップステートイベント

いつ

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

window.onpopstateを参照

读取当前的state

当页面加载时，它可能会有一个非空的state对象。这可能发生在当页面设置一个state对象(使用pushState或者replaceState)之后用户重启了浏览器。当页面重新加载，页面将收到onload事件，但不会有popstate事件。然而，如果你读取history.state属性，将在popstate事件发生后得到这个state对象

var currentState = history.state;

Browsers: Tested and Working In

HTML5 Browsers

Chrome 8,9,10
Firefox 4
Safari 5
Opera 11
Safari iOS 4.3
HTML4 Browsers

IE6,7,8,9
Firefox 3
Opera 10
Safari 4
Safari iOS prior to version 4.3

【相关推荐】

1. 特别推荐：“php程序员工具箱”V0.1版本下载

2. js中的window.history的用法（一）

3. js中的window.history的用法（二）

4. 详细介绍h5中的history.pushState()使用实例

5. h5中History API 对Web应用的影响

以上がh5 の履歴機能 --pushState、replaceState についての深い理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。