HTML 5のpushstate、popstate操作history、現在のurlを更新せずに変更

一、windowを知っています.history window.historyはwindowオブジェクトの履歴を表し、ユーザがアクティブに生成しjavascriptスクリプト制御を受けるグローバルオブジェクトである.Windowsオブジェクトは、historyオブジェクトを介して、ビューア履歴へのアクセスを提供します.非常に有用な方法と属性を暴露し、履歴の中で自由に前進し、後退させます.
1、歴史記録の前進と後退
履歴で後退するには、次のようにします.

1 window.history.back();

これは、ユーザーがブラウザの後退ボタンをクリックしたようなものです.
ブラウザで前進ボタンをクリックするように、前進することができます.
 

1 window.history.forward();

 
2、指定した履歴ポイントに移動
現在のページ位置に対する数値を指定することで、go()メソッドを使用して、現在のセッションの履歴からページをロードできます(現在のページ位置インデックス値は0、前のページは-1、次のページは1).
1ページ後退するには(back()を呼び出すのと同じ):

1 window.history.go(-1);

1ページ前に移動(forward()を呼び出すのと同じ):

1 window.history.go(1);

 
同様に、パラメータ「2」を渡すと、2つの記録点を前に移動できます.lengthプロパティ値を表示して、履歴スタックに合計何個のレコードポイントがあるかを知ることができます.

1 window.history.length;

 
二、履歴点の修正
HTML 5の新しいAPIがwindowを拡張しました.historyは、歴史記録点をさらに開放した.現在の履歴ポイントを格納したり、現在の履歴ポイントを置き換えたり、履歴ポイントをリスニングしたりすることができます.以下、簡単に説明します.
1、現在の履歴ポイントを記憶する
格納方法は、windowで配列のスタック(Array.push())に似ている.historyには、次のような履歴ポイントが追加されています.

1 //    url ：http://qianduanblog.com/index.html

2 var json={time:new Date().getTime()};

3 // @    ：            ，    

4 // @    ：           

5 // @   url：       url    ，   url，url    ，    

6 window.history.pushState(json,"","http://qianduanblog.com/post-1.html");

 
PushStateメソッドを実行すると、ページのurlアドレスはhttp://qianduanblog.com/post-1.html.
2、現在の履歴ポイントを置換するwindow.history.replaceStateとwindow.history.pushStateは類似しており、異なる点はreplaceStateがwindow.historyに履歴点を追加しないことであり、その効果はwindow.location.replace(url)に類似しており、いずれも履歴点に記録点を追加しないことである.ユーザーのいくつかの操作に応答するために、現在の履歴エントリのステータスオブジェクトまたはURLを更新する場合は、replaceState()メソッドを使用すると特に適しています.
3、傍受履歴ポイント
リスニング履歴ポイントは、直感的にリスニングURLの変化と考えられるが、URLのhash部分は無視され、リスニングURLのhash部分、HTML 5にはonhashchangeという新しいAPIがあり、私のブログではこの方法とブラウザ間の互換性ソリューションについても述べている.urlの変化は、window.onpopstateによって傍受することができ、履歴記録ポイントに格納された状態オブジェクト、すなわち、上述したjsonオブジェクト、例えば、以下のような状態オブジェクトを取得することができる.

 1 //    url ：http://qianduanblog.com/post-1.html

 2 window.onpopstate=function()

 3 {

 4     //             json  

 5     var json=window.history.state;

 6     //        ：http://qianduanblog.com/index.html

 7     //    json null

 8     //         ：http://qianduanblog.com/post-1.html

 9     //   json {time:1369647895656}

10 }

 
javascriptスクリプト実行window.history.pushStateおよびwindow.history.replaceStateは、onpopstateイベントをトリガーしません.
もう一つ注意したいのは、グーグルブラウザと火狐ブラウザがページで初めて開いた反応が異なることです.グーグルブラウザはonpopstate事件をトリガーしますが、火狐ブラウザはしません.