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

•android 端使用的h5中的history对象,history.replaceState(null, null, "/currentURL?a="+uuid());在页面加载完成后改变当前url(拼接一个uuid或者随机数),这样每次后退的时候,浏览器发现当前url在浏览器缓存中不存在就会去重新加载。
•但是 ios 端不支持上述方法,所以用了一段jquery代码解决。

总结

以上所述是小编给大家介绍的微信web端后退强制刷新功能的实现代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

您可能感兴趣的文章:

  • ios微信浏览器返回不刷新问题完美解决方法
  • iOS微信浏览器回退不刷新实例(监听浏览器回退事件)
  • 解决ios微信页面回退不刷新的问题
  • 微信小程序 列表的上拉加载和下拉刷新的实现
  • 解决微信内置浏览器返回上一页强制刷新问题方法
  • 微信小程序 scroll-view实现上拉加载与下拉刷新的实例
  • 微信小程序 详解下拉加载与上拉刷新实现方法
  • 微信小程序(六):列表上拉加载下拉刷新示例
  • 详解微信小程序开发之下拉刷新 上拉加载
(0)

相关推荐

  • 微信小程序 scroll-view实现上拉加载与下拉刷新的实例

    微信小程序 scroll-view实现上拉加载与下拉刷新的实例 实现效果图: 如图,使用小程序的scroll-view实现的上拉加载数据,下拉刷新数据,试下代码如下: js文件代码: var url = "http://192.168.30.4:8080/gtxcx/carrier/getCarrier.action"; var page = 1; var GetList = function (that) { that.setData({ hidden: false }); wx.r

  • 解决微信内置浏览器返回上一页强制刷新问题方法

    微信内置浏览器在返回上一页面,且上一页面包含AJAX代码时,页面就会被强制刷新,极度影响用户体验.而我们想要的效果是:返回上一页面时,页面还停留在原来的状态,AJAX获取到的数据还在,滚动条也在原来的位置. BINGO~ 通过HTML5的history API + 缓存可以做到这一点. 执行原理: 1.0.通过history API的 history.pushState或 history.replaceState 保存AJAX状态: 2.0.同时将AJAX获取到的数据缓存起来(可以考虑使用H5的

  • 详解微信小程序开发之下拉刷新 上拉加载

    微信小程序中的下拉刷新,上拉加载的功能很常见,目前我知道的有两种可行的方法,一是scroll-view,二是整个页面刷新.今天说说第一种,自己造轮子,难免有些瑕疵,日后慢慢完善. 上gif: 原理: scroll-view中有监听滑动的方法,这个跟Android类似.其中用到了滑动到顶部,滑动到底部的方法. 1.下拉刷新,在滑动到顶部时,bindscrolltoupper被调用,根据自己的业务逻辑请求即可.我的demo只是随机换了个关键字. 2.上拉加载,在滑动到底部时,bindscrollto

  • iOS微信浏览器回退不刷新实例(监听浏览器回退事件)

    iOS在微信浏览器回退是不重新加载页面的,有些时候是需要重新加载的,所以需要监听回退事件 $(function(){ pushHistory(); }); function pushHistory(){ window.addEventListener("popstate", function(e){ alert("回退!"); //window.history.back(); //在历史记录中后退,这就像用户点击浏览器的后退按钮一样. //window.histor

  • 解决ios微信页面回退不刷新的问题

    在回退后需要刷新的页面加以下js $(function () { var isPageHide = false; window.addEventListener('pageshow', function () { if (isPageHide) { window.location.reload(); } }); window.addEventListener('pagehide', function () { isPageHide = true; }); }) 以上这篇解决ios微信页面回退不刷

  • 微信小程序(六):列表上拉加载下拉刷新示例

    1.列表(本部分内容出入官方文档) 对于这个功能,微信小程序中并没有提供类似于Android中listview性质的控件,所以我们需要使用 wx:for 控制属性绑定一个数组,用数组中各项的数据重复渲染该组件,来达到列表的效果. <view wx:for="{{array}}"> {{index}}: {{item.message}} </view> Page({ data: { array: [{ message: 'foo', }, { message: '

  • 微信小程序 列表的上拉加载和下拉刷新的实现

    微信小程序可谓是9月21号之后最火的一个名词了,一经出现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,微信小程序的到来会不会让移动端App颠覆,让移动端的程序员失业,身为一个Android开发者我是不相信的,即使有,那也是需要个一两年的过度和打磨才能实现的吧. 不管微信小程序是否能颠覆当今的移动开发格局,我们都要积极向上的心态去接收,去学习.不排斥新技术,所以,心动不如行动,赶紧先搭建一个微信小程序开发工具.那么接下来就让我们来开始学习列表的上拉加载和下拉刷新的实现吧(通过聚合数据

  • 微信小程序 详解下拉加载与上拉刷新实现方法

    微信小程序下拉刷新上拉加载的两种实现方法 实现效果图: 方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性             属性   类型                           描述 enablePullDownRefresh Boolean 是否开启下拉刷新,详见页面相关事件处理函数. 设置js里onPullDownRefresh和onReachBottom方法 属性    类

  • ios微信浏览器返回不刷新问题完美解决方法

    开始用的表单提交,返回参数就丢失,换成url跳转,popstate监听 (注释部分)ios10测试始终有问题,继续搜,最后用pageshow,pagehide完美解决(另外说一句:珍爱生命,远离微信和ios) var wxback = { init :function(){ //隐藏微信分享按钮等 document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { WeixinJSBridge.call('hid

  • 微信web端后退强制刷新功能的实现代码

    具体代码如下所示: <script> //生成uuid var uuidChars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split(""); function uuid() { var r; var uuid = []; uuid[8] = uuid[13] = uuid[18] = uuid[23] = "-"; uuid[14] =

  • Django实现web端tailf日志文件功能及实例详解

    这是Django Channels系列文章的第二篇,以web端实现tailf的案例讲解Channels的具体使用以及跟Celery的结合 通过上一篇 <Django使用Channels实现WebSocket--上篇> 的学习应该对Channels的各种概念有了清晰的认知,可以顺利的将Channels框架集成到自己的Django项目中实现WebSocket了,本篇文章将以一个Channels+Celery实现web端tailf功能的例子更加深入的介绍Channels 先说下我们要实现的目标:所有

  • django ajax提交评论并自动刷新功能的实现代码

    在试了很多次了,终于搞定了,上代码吧.(我用的是jQuery的ajax,不是原生的) js代码: <script> $(document).ready(function () { getcomment(); $('.comment-box button').click(function () { var comment_text = $('.comment-box textarea').val(); $.ajax({ type: 'POST', url: '/bbs/article/{{ ar

  • 微信小程序下拉框功能的实例代码

    微信小程序组件里没有下拉框,正好要用到,记下来以后参考 wxml代码 <view class='top'> <view class='top-text'> 选择接收班级</view> <!-- 下拉框 --> <view class='top-selected' bindtap='bindShowMsg'> <text>{{grade_name}}</text> <image src='/images/icon/do

  • php实现微信公众号创建自定义菜单功能的实例代码

    目的 创建自定义菜单,实现菜单事件. 首先获取Access_Token 接口: https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET 我用的是测试号,修改APPID和APPSECRET,然后浏览器访问上面这个Url即可生成Access_Token 然后配置菜单的事件,caidan.php <?php header("Content-t

  • 微信小程序之搜索分页功能的实现代码

    直接上代码: wxml: <wxs src="../wxs/changeimg.wxs" module="changeimg" /> <view class="container"> <view class="search_input"> <image class="back" src="" mode="widthFix"&g

  • 微信小程序实现拨打电话功能的示例代码

    1.在对应需要拨打电话的标签那里绑定事件(使用的标签不固定,可以是text.view等) 例子: <text class="phone" bindtap="callPhone">400-9121-211</text> 2.在对应的事件方法里面写入 wx.makePhoneCall方法 例子: callPhone() { wx.makePhoneCall({ phoneNumber: '400-9121-211' //仅为示例,并非真实的电话号

  • Android 本地广播和强制下线功能的实现代码

    一.使用本地广播 1.本地广播一个举例 package com.example.broadcasttest2; import android.app.Activity; import android.content.BroadcastReceiver; import android.content.Context; import android.content.Intent; import android.content.IntentFilter; import android.net.Conn

  • Android实现强制下线功能的示例代码

    一.回顾 上次连载写了两个类,一个类ActivityCollector.java用于管理所有的活动:一个类是BaseActivity.java作为所有活动的父类: 还有一个放在layout目录中的登录界面login.xml 二.登录页面的活动 接下来写一个登录页面的活动,继承自BaseActivity.java package com.example.broadcastbestpractice; import android.content.Intent; import android.os.B

  • js中调用微信的扫描二维码功能的实现代码

    关键代码 <html> <head> <title> js调用微信扫一扫功能测试 </title> <!--引用微信JS库--> <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <!--引用jQuery库--> <script t

随机推荐