いろいろ情報を確認したところ、別ページへの部分更新にはajaxを使用しているようです。つまり、htmlファイルが2つあり、履歴とロールの保存にはwindow.onpopstateメソッドとhistory.pushStateメソッドが使用されているようです。ページを戻します。 Ajaxを使用している場合、または現在のページでデータを生成している場合、ブラウザの戻る機能を実装する方法を聞きたいですか?具体的な例を挙げていただけますか？
ajax の主な問題点は、ブラウザの前後方向の操作をサポートできないことです。そのため、初期の Gmail は、ajax の前後方向の操作をシミュレートするために iframe を使用していました。
まず互換性を確認してください。
IE8 と 9 は H5 履歴を使用できないことがわかります。pushState、replaceState をサポートしていないブラウザでは shim HTML5 History API 拡張を使用する必要があります。
が空であることに気付きました。
history.length 值为1, history.state
history.length
history.state
を取得するには、ページが読み込まれた後に現在の URL を自動的に置き換える必要があります。 リーリー 2) ajax リクエストが送信されるたびに、リクエストの完了後、ブラウザ履歴を進めるために以下が呼び出されます。 リーリー
popstate
を取り出し、パラメーターを構築して ajax リクエストを再送信するか、状態値を直接使用します。更新せずにページを復元します。history.state リーリー
イベント オブジェクトには次のプロパティがあります。
popstate 事件会自动触发, 此时我们手动取出 history.state
popstate 事件触发时, 默认会传入 PopStateEvent
PopStateEvent
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
履歴と互換性のあるajax
ajax の主な問題点は、ブラウザの前後方向の操作をサポートできないことです。そのため、初期の Gmail は、ajax の前後方向の操作をシミュレートするために iframe を使用していました。
現在、H5 が人気であり、Pajax は ajax+history.pushState を組み合わせた技術であり、これを使用すると、ブラウザを更新せずに前後に進むことでページのコンテンツを変更できます。まず互換性を確認してください。
IE8 と 9 は H5 履歴を使用できないことがわかります。pushState、replaceState をサポートしていないブラウザでは shim HTML5 History API 拡張を使用する必要があります。
pjax
pjax は使いやすく、次の 3 つの API のみが必要です:が空であることに気付きました。
1) onpopstate イベント コールバックで毎回history.length值为1,history.stateを取得するには、ページが読み込まれた後に現在の URL を自動的に置き換える必要があります。 リーリー
2) ajax リクエストが送信されるたびに、リクエストの完了後、ブラウザ履歴を進めるために以下が呼び出されます。
リーリー
3) ブラウザーが前後に移動すると、popstateイベントが自動的にトリガーされます。このとき、手動でを取り出し、パラメーターを構築して ajax リクエストを再送信するか、状態値を直接使用します。更新せずにページを復元します。
history.stateリーリーイベント オブジェクトには次のプロパティがあります。
popstate事件会自动触发, 此时我们手动取出history.state
理解できない場合は、「Ajax と履歴の互換性」にアクセスして詳細な説明を参照してくださいpopstate事件触发时, 默认会传入PopStateEvent