ホームページ  >  記事  >  ウェブフロントエンド  >  WeChat Web側でバックフォースリフレッシュ機能を実装する方法(詳細なチュートリアル)

WeChat Web側でバックフォースリフレッシュ機能を実装する方法(詳細なチュートリアル)

亚连
亚连オリジナル
2018-06-01 15:14:151877ブラウズ

この記事では主にWeChat Web側のバック強制更新機能の実装コードを紹介しますので、必要な方は参考にしてください

具体的なコードは以下の通りです:

<script>
  //生成uuid
  var uuidChars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split("");
  function uuid() {
    var r;
    var uuid = [];
    uuid[8] = uuid[13] = uuid[18] = uuid[23] = "-";
    uuid[14] = "4";
    for (i = 0; i < 36; i++) {
      if (!uuid[i]) {
        r = 0 | Math.random() * 16;
        uuid[i] = uuidChars[(i == 19) ? (r & 0x3) | 0x8 : r];
      }
    }
    return uuid.join("");
  }
  // 兼容 android
  history.replaceState(null, null, "/currentURL?a="+uuid());
  // 兼容 ios
  $(function () { 
     var isPageHide = false; 
     window.addEventListener(&#39;pageshow&#39;, function () { 
      if (isPageHide) { 
       window.location.reload(); 
      } 
     }); 
     window.addEventListener(&#39;pagehide&#39;, function () { 
      isPageHide = true; 
     }); 
  })
</script>

•h5の履歴オブジェクト。 Android 側で使用されます。 history.replaceState(null, null, "/currentURL?a="+uuid()); ページがロードされた後に現在の URL を変更します (uuid または乱数を結合します)。これにより、戻るたびに、現在の URL がブラウザーに存在しないことが判明したときにブラウザーがリロードされます。キャッシュ。
•ただし、iOS側は上記の方法をサポートしていないため、jqueryコードを使用して解決しました。

上記は私があなたのためにまとめたものです。

関連記事:

vue axiosリクエストインターセプトサンプルコード

vue2を使用してショッピングカートとアドレス選択機能を実装

Angular開発の実践サーバーサイドレンダリング

以上がWeChat Web側でバックフォースリフレッシュ機能を実装する方法(詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。