WeChat内蔵ブラウザを解決して前のページに戻り、強制的に問題を更新する方法。


WeChatにはブラウザが内蔵されています。前のページにAJAXコードが含まれている場合、ページは強制的に更新され、ユーザー体験に極めて影響を与えます。前のページに戻ると、ページは元の状態に留まり、AJAXで取得したデータはまだあります。スクロールバーも元の位置にあります。
BINGO~
HTML 5のhistory API+キャッシュによってこれができます。
実行原理:
1.0、history APIのhistory.pusStateまたはhistory.replacceStateによってAJAX状態を保存します。
2.0、同時にAJAXで取得したデータをキャッシュする(H 5のlocal Strageまたはsessionstogeを使用することが考えられる)。
3.0、このページに戻ったら、まずウィンドウのhistory.stateを取得します。空でないと、保存の状態を表します。私達がやるべきことはこの状態に回復することです。
4.0、キャッシュデータを読み出してロードする。改ページに関連しており、スクロールローディングの形態であれば、現在のページをhistory.stateのページ数に設定する必要があります。
技術点の紹介を使う:
history API:
HTML 5 history APIには、2つの方法しか含まれていません。history.pustite()とhistory.replacceState()、および1つのイベント:window.onpopstate。
①history.pusState()
その完全体はhistory.pusStateで、三つのパラメータが含まれています。
1番目のパラメータは状態オブジェクトです。カスタムデータを格納する要素として理解できます。パラメータとして同時に使うurlと関連しています。
2番目のパラメータはタイトルで、文字列です。現在は各ブラウザはそれを無視します。現在は空の文字列に設定することを提案しています。
3番目のパラメータはURLアドレスです。普通は簡単ですか?page=2のようなパラメータスタイルの相対パスは、自動的に現在のURLを基準にします。本パラメータのURLは現在のページURLと同じソースが必要です。そうでないとエラーが発生します。
pusshState()を呼び出して履歴を新たに作成します。ブラウザの「後退」と「前進」でナビゲーションしやすいです。また、URLの同ソースポリシーからは、HTML 5 history APIの出発点が明確であり、ジャンプしていない単サイトをブラウザの複数の履歴として保存することもできる。履歴によってサイトを再読み込みすると、局は直接に対応する状態にロードすることができます。
②history.replace State()
それはhistory.pusStateとほぼ同じで、違いは一つしかないです。history.replace State()は新たに歴史記録を生成するのではなく、現在の歴史記録を置き換えるのです。
③window.onpopstate
pushの対立はポップで、このイベントはブラウザで履歴を取り出して読み込む際に発生したものと推測されます。しかし、実際には、ブラウザの「前進」、「後退」といったナビゲーションボタンをクリックしたり、JavaScriptで起動したhistory.back()などのナビゲーション方法をクリックしたり、前後の2つの履歴を切り替えたりするだけで、このイベントが発生します。
上の「同一ページドキュメント」はJavaScript環境の「document」と同じです。基本URLではなく、同じです。つまり、再読み込みが発生した場合(新しいサイトに移動しても、自局に継続しても)、JavaScriptのグローバル環境が変化した場合、popstateイベントは発生しません。
popstateイベントは前の2つの方法と組み合わせるように設計して使います。一般的には、前の2つの方法で同じサイトの複数の履歴を設定し、その間でナビゲーション(前進または後退)する場合にのみ、このイベントがトリガされる。また、前の2つの方法で設定した状態オブジェクト(1つ目のパラメータ)も、このときイベントのevent.stateを介して返却されます。
以上が本文の全部です。本文の内容は皆さんの学習や仕事に一定の助けをもたらしてくれると同時に、私達を応援してください。