Heim  >  Artikel  >  Web-Frontend  >  So implementieren Sie die Back-Force-Refresh-Funktion auf der WeChat-Webseite (ausführliches Tutorial)

So implementieren Sie die Back-Force-Refresh-Funktion auf der WeChat-Webseite (ausführliches Tutorial)

亚连
亚连Original
2018-06-01 15:14:151875Durchsuche

In diesem Artikel wird hauptsächlich der Implementierungscode der Back-Force-Refresh-Funktion auf der WeChat-Webseite vorgestellt. Freunde in Not können darauf verweisen

Der spezifische Code lautet wie folgt:

<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>

•Das Verlaufsobjekt in h5, das auf der Android-Seite verwendet wird, history.replaceState(null, null, "/currentURL?a="+uuid()); ändert die aktuelle URL (zusammenfügen einer UUID oder Zufallszahl), nachdem die Seite geladen wurde, sodass jedes Mal, wenn Sie gehen Zurück findet der Browser die aktuelle URL. Wenn sie nicht im Browser-Cache vorhanden ist, wird sie neu geladen.
•Aber die iOS-Seite unterstützt die obige Methode nicht, daher habe ich einen Teil des JQuery-Codes verwendet, um das Problem zu lösen.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Vue Axios Request Interception-Beispielcode

Verwendung von vue2 zur Implementierung von Warenkorb- und Adressabgleichsfunktionen

Serverseitiges Rendering der Angular-Entwicklungspraxis

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Back-Force-Refresh-Funktion auf der WeChat-Webseite (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn