JavaScript - Ajax のバックページと歴史について質問がありますか?

Question

いろいろ情報を確認したところ、別ページへの部分更新にはajaxを使用しているようです。つまり、htmlファイルが2つあり、履歴とロールの保存にはwindow.onpopstateメソッドとhistory.pushStateメソッドが使用されているようです。ページを戻します。 Ajaxを使用している場合、または現在のページでデータを生成している場合、ブラウザの戻る機能を実装する方法を聞きたいですか?具体的な例を挙げていただけますか？

Answer 1

履歴と互換性のあるajax

ajax の主な問題点は、ブラウザの前後方向の操作をサポートできないことです。そのため、初期の Gmail は、ajax の前後方向の操作をシミュレートするために iframe を使用していました。

現在、H5 が人気であり、Pajax は ajax+history.pushState を組み合わせた技術であり、これを使用すると、ブラウザを更新せずに前後に進むことでページのコンテンツを変更できます。

まず互換性を確認してください。

pushState/replaceState歴史.州

IE8 と 9 は H5 履歴を使用できないことがわかります。pushState、replaceState をサポートしていないブラウザでは shim HTML5 History API 拡張を使用する必要があります。

pjax

pjax は使いやすく、次の 3 つの API のみが必要です:

• history.pushState(obj, title, url) は、ページ履歴の最後に履歴エントリを追加することを意味します。このとき、history.length は +1 になります。
  history.replaceState(obj, title, url) は、現在の履歴項目を新しい履歴項目に置き換えることを意味します。この時点では、history.length は変更されません。
• window.onpopstate は、ブラウザーが前後に移動するときにのみトリガーされ (history.go(1)、history.back()、および location.href="xxx" がすべてトリガーされます)、次のhistory.stateで取得できます。今回は挿入した状態はobjオブジェクトです(他のデータ型も許容されます)。

• 初めてページに入ると、次のように

  が空であることに気付きました。

history.length 值为1, history.state

1) onpopstate イベント コールバックで毎回

を取得するには、ページが読み込まれた後に現在の URL を自動的に置き換える必要があります。 リーリー 2) ajax リクエストが送信されるたびに、リクエストの完了後、ブラウザ履歴を進めるために以下が呼び出されます。 リーリー

3) ブラウザーが前後に移動すると、popstate イベントが自動的にトリガーされます。このとき、手動で

を取り出し、パラメーターを構築して ajax リクエストを再送信するか、状態値を直接使用します。更新せずにページを復元します。history.state リーリー

イベント オブジェクトには次のプロパティがあります。

popstate 事件会自动触发, 此时我们手动取出 history.state

popstate 事件触发时, 默认会传入 PopStateEvent

理解できない場合は、「Ajax と履歴の互換性」にアクセスして詳細な説明を参照してください

いえ	エッジ	Firefox	クロム	サファリ	オペラ	iOS サファリ	Androidブラウザ	Android 版 Chrome
10	12	4	5	6	11.5	7.1	4.3	53
10		4	18	6	11.5