この関数は前に簡単に説明しました。今回は、原則と既存の問題を詳細に説明します（HTML5の新しいAPIを使用するため、互換性の問題があるため、モバイル端末がこの方法を使用することをお勧めします）。
機能の説明：
ブラウザで新しいタブページを作成し、URLを指定します。 Webページが読み込まれた後、クリックは通常のプロセスでは返されません。現在のタブページに関連する履歴がないため、レコードを返すことはできません。
顧客の要求に応じて、この場合、彼の歴史記録にリンク（ホームページなど）を追加して、新しく開いたページでクリックして戻ると、ホームページにジャンプして、ユーザーがシステムのさまざまな機能を確認してプラットフォームを宣伝できるようにします。
1。知識の重要な点
html5は、history.pushstate（）メソッドとhistory.replacestate（）メソッドを紹介します。これにより、項目ごとに履歴エントリを追加および変更できます。これらのメソッドは、window.onpopstateイベントと協力できます。
場合：
http://mozilla.org/foo.htmlが次のJavaScriptコードを実行すると仮定します。
コードコピーは次のとおりです。VARSTATEOBJ= {foo： "bar"}; history.pushstate（stateobj、 "page 2"、 "bar.html"）;
これにより、ブラウザのアドレスバーショーhttp://mozilla.org/bar.htmlが表示されますが、bar.htmlページはbar.htmlが存在するかどうかをロードしたり確認したりしません。
ユーザーがhttp://google.comにナビゲートし、[戻る]ボタンをクリックすると仮定します。この時点で、アドレスバーにはhttp://mozilla.org/bar.htmlが表示され、ページがポップスティートイベントをトリガーします。イベントの状態オブジェクトには、StateOBJのコピーが含まれています。ページはfoo.htmlのように見えますが、ページコンテンツはポップステートイベントで変更される場合があります。
もう一度[バックボタン]ボタンをクリックすると、URLはhttp://mozilla.org/foo.htmlドキュメントに戻り、別のポップステートイベントをトリガーします。今回はステータスオブジェクトはnullです。また、フォールバックはドキュメントのコンテンツを変更しません。
pushState（）メソッド
PushState（）には、3つのパラメーターがあります。状態オブジェクト、タイトル（これは現在無視されます）、およびオプションのURLアドレスです。これらの3つのパラメーターの詳細を個別に調べてみましょう。
状態オブジェクト-PushState（）メソッドで作成された新しい履歴エントリに関連付けられたJavaScriptオブジェクト。ユーザーが新しく作成された状態に移動するたびに、ポップステートイベントがトリガーされ、イベントオブジェクトの状態プロパティには履歴エントリの状態オブジェクトのコピーが含まれています。
シリアル化可能なオブジェクトは、状態オブジェクトとして扱うことができます。 Firefoxブラウザは、ユーザーのハードディスクに状態オブジェクトを保存しているため、ユーザーがブラウザを再起動した後に復元できるため、状態オブジェクトのサイズを640kに強制的に制限します。この制限を超えてPushState（）メソッドを超える状態オブジェクトを渡すと、メソッドは例外をスローします。大量のデータを保存する必要がある場合は、SessionStorageまたはLocalStorageを使用することをお勧めします。
タイトル-Firefoxブラウザは現在、このパラメーターを無視していますが、将来使用される可能性があります。この方法が将来変更される可能性があることを考慮すると、空の文字列を渡す方が安全になります。または、入力しようとしているステータスを示す短いタイトルで渡すこともできます。
アドレス（URL） - 新しい履歴エントリのアドレス。ブラウザは、PushState（）メソッドを呼び出すとアドレスをロードしませんが、その後、ユーザーがブラウザを再起動するなど、ロードしようとする場合があります。新しいURLは、必ずしも絶対的なパスではありません。それが相対的なパスである場合、それは現在のURLに基づいています。渡されたURLは現在のURLと同じである必要があります。そうしないと、PushState（）が例外をスローします。このパラメーターはオプションです。指定されていない場合、ドキュメントの現在のURLです。
注：Gecko 2.0（Firefox 4 / Thunderbird 3.3 / Seamonkey 2.1）では、Gecko 5.0（Firefox 5.0 / Thunderbird 5.0 / Seamonkey 2.2）に、渡されたオブジェクトはJSONを使用してシリアル化されます。 Gecko 6.0（Firefox 6.0 / Thunderbird 6.0 / Seamonkey 2.3）から始めて、オブジェクトは構造化されたコピーアルゴリズムを使用してシリアル化されます。これにより、より多くの種類のオブジェクトを安全に渡すことができます。
ある意味では、PushState（）を呼び出すことは、Window.location = '＃foo'の設定に少し似ており、すべてのドキュメント内の新しい履歴エントリを作成およびアクティブ化します。しかし、PushState（）には独自の利点があります。
1.新しいURLは、任意の相同URLにすることができます。対照的に、Window.Locationメソッドを使用する場合、Hashを変更するだけで、同じドキュメントにとどまることができます。
2。個人的なニーズに応じてURLを変更するかどうかを決定します。代わりに、windocy.location = '＃foo'を設定し、現在のハッシュ値がfooではない場合にのみ、新しい履歴を作成します。
3.抽象データを新しい履歴エントリに追加できます。ハッシュベースの方法を使用する場合、関連するデータを非常に短い文字列にのみトランスコードできます。
PushState（）メソッドは、新しいアドレスがハッシュのみを変更する場合でも、ハッシュチャンジイベントをトリガーすることはないことに注意してください。
ポップステートイベント
アクティブ化された履歴が変更されるたびに、ポップステートイベントがトリガーされます。アクティブ化された履歴エントリがPushStateによって作成されている場合、または交換メソッドの影響を受けた場合、Popstateイベントのステータス属性には履歴ステータスオブジェクトのコピーが含まれます。
交換（）メソッド
history.replaceState（）操作は、history.pushstate（）に似ていますが、lupterestate（）メソッドが新しいエントリを作成する代わりに現在の履歴エントリを変更することを除きます。
ユーザーによる特定のアクションに応答して、現在の履歴エントリのステータスオブジェクトまたはURLを更新する場合、applectestate（）メソッドを使用することが特に適しています。
2。実装のアイデア
1.ポップステートイベントを使用して、クリックアンドリターンイベントを聴きます。
2。イベントがトリガーされたら、現在のページの履歴を返すページがあるかどうかを判断します。
3.返されるページがない場合、2つのレコードが挿入されます。
1）指定されたジャンプページ。
2）空のレコード。 （現在のページを変更しないようにします）
実装方法
//関数を返す前にページなしでホームページに戻るpushhistory（）{if（history.length <2）{var state = {title： "index"、url：gethttpprefix + "index.html"}; window.history.pushstate（state、 "index"、location.href）; state = {title： "index"、url： ""}; window.history.pushstate（state、 "index"、 ""）; } //lll("history.state " + history.state）//console.log(history.state）}現在の歴史の記録の数を決定します。ブラウザはページが読み込まれると自動的にレコードをプッシュするため。したがって、長さが2未満かどうかを判断する必要があります。
詰め込まれた状態オブジェクトは、対応するURLリンクを取得することです。
注記：
ジャンプ操作を容易にするために、最初のプッシュステートのジャンプURLを状態オブジェクトに入れました。現在のブラウザは基本的にこのパラメーターを適用しないため、2番目のパラメーターには実用的な意味はありません。
3番目のパラメーターは、現在のアドレスバーのリンクを置き換えますが、ページはジャンプしません。 （以前に間違いを犯し、3番目のパラメーターをホームページリンクに設定しました。これにより、アドレスバーがホームページリンクに変更され、現在のページのリンクがホームページに基づいてリダイレクトされ、ページ上のすべてのリンクがリダイレクトされるエラーが発生します。）
setimeout（function（）{pushhistory（）window.addeventlistener（ "popstate"、function（e）{lll（ "popstate"+window.history.state）if（window.history.state！= null && window.history.state.url！= "" 300）;このコードは、操作を遅らせ、システムポップイベントとの競合を防ぐために300ミリ秒の遅延があるページの準備ができたイベントに配置されます。
履歴に状態オブジェクトがあるかどうかを判断するために、要件を満たすレコードのみが追加された状態オブジェクトを持つため、この点に基づいてページジャンプ操作を実行できます。
これは私たちが望む効果を達成します。
4。最後に書きます
欠点：
1.明らかに、最初に述べたように。 HTML5をサポートするブラウザにのみ適しています。
2。2つのレコードが挿入されたため、WeChatのようなモバイル端末の返品では、ページを起動してWeChatチャットウィンドウに戻る前に2回クリックする必要があります。ユーザーエクスペリエンスが低い。
要約：
この方法は間違いなく最適化され、改善されますが、私の強さは完璧さのレベルまで完成するのに十分ではありません。
この記事を読んだ友人がインスピレーションを得ることができるか、それを達成するためのより良い方法があることを願っています。