How to implement the back force refresh function on WeChat web side (detailed tutorial)

This article mainly introduces the implementation code of the back force refresh function on the WeChat web side. Friends who need it can refer to it

The specific code is as follows:

<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('pageshow', function () { 
      if (isPageHide) { 
       window.location.reload(); 
      } 
     }); 
     window.addEventListener('pagehide', function () { 
      isPageHide = true; 
     }); 
  })
</script>

•The history object in h5 used by the android side, history.replaceState(null, null, "/currentURL?a=" uuid()); changes after the page is loaded The current url (spliced ​​with a uuid or random number), so that every time you go back, the browser will reload if it finds that the current url does not exist in the browser cache.
•But the ios side does not support the above method, so I used a piece of jquery code to solve it.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

vue axios request interception example code

Use vue2 to implement shopping cart and address selection functions

Angular development practice server-side rendering

The above is the detailed content of How to implement the back force refresh function on WeChat web side (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!