Ios中微信页面返回上一页去除缓存几种常见思路

更新日期: 2019-06-09阅读: 3.2k标签: 微信

前言

这篇文章主要讲解决思路,不对各种概念进行过多讲解。


问题描述

开发微信H5页面的时候,在Ios微信内置浏览器中点击返回按钮返回上一页时,上一页面不会被刷新。
在浏览器缓存机制中,在返回上一页的操作中, html/js/css/接口等动静态资源不会重新请求,但是js会重新加载。但在Ios微信页面中js也会保存上一页面最后执行的状态,不会重新执行js。使用这种模式缓存机制可以加快渲染速度,但是部分数据需要经常展示和编辑的情况下回导致不同步。比如“详情页”跳转到“编辑页”,在“编辑页”中修改数据后返回到详情页中,“详情页”数据展示并未进行同步修改。


产生原因

这里提到一个概念,浏览器前进/后退缓存,(Backward/Forward Cache,BF Cache),当然也有人叫disk Cache。BF Cache 是一种浏览器优化,HTML标准并未指定其如何进行缓存,因此缓存行为是各浏览器实现不尽相同。由于不是Http缓存,所以通过头文件缓存设置no-cache是无效的。当然也不能以Http缓存机制来理解BF Cache。


解决思路

从网上看了几种比较常见的解决思路,下面简单讲解。


设置浏览历史当前记录

history.replaceState方法的参数与pushState方法一模一样,区别是它修改浏览历史中当前纪录。

var href = location.href;
var time = new Date().getTime();
href += href.indexOf('?') > -1 ? ('&time='+time) : ('?time=' + time);

history.replaceState({}, "title", href);
// 比如当前页面地址为http://www.a.com; 通过history.replaceState修改后当前地址会变为http://www.a.com?time=xxx

网上这种解决思路比较多,实际情况中并不可行。
原因:Ios微信中调整到下一页面后并未将上一页面修改的url保持在历史记录中,以代码为例,返回上一页并未返回到http://www.a.com?time=xxx , 而是返回到 http://www.a.com 中。


通过时间差来判断是否需要重置

var prev = parseInt(new Date().getTime() / 1000);
var now = prev;

window.setInterval(function() {
    now = parseInt(new Date().getTime() / 1000);
    
    // 当前步骤与上一步骤时间差超过1秒,表示页面已经跳转过
    // 时间差需要与间隔时间相对应
    if (now - prev > 1) {
        location.reload();
    } else {
        prev = now;
    }
// 间隔时间设置为1秒
}, 1000);

原理:通过判断当前步骤与上一步骤的时间差来判断是否需要更新
缺点:间隔轮询时间差长度设置为多久比较好,不好掌控; 通过setInterval设置的间隔时间差并不是很精确; 并且两个页面之间的反复切换速度非常迅速的情况下也许会出现监测不到的现象。


通过localStorage控制是否需要刷新

localStorage.setItem("need-refresh", true);
$(function () {
    var needRefresh = localStorage.getItem("need-refresh");
    if(needRefresh) {
        localStorage.removeItem("need-refresh");
        location.reload();
    }
});

原理:通过获取浏览器保存的key来决定页面是否需要刷新
缺点:当页面关闭再重新打开时,key(也就是代码中的need-refresh)key值为true,会导致页面加载两次,造成重复渲染


通过pageshow事件决定是否需要刷新页面

window.addEventListener('pageshow', function(e) {
    // 通过persisted属性判断是否存在 BF Cache
    if (e.persisted) {
        location.reload();
    }
});

原理:pageShow事件在页面显示即会触发,无论页面是否来自BF Cache。通过检测persisted属性即可判断是否存在 BF Cache 行为。
优点:大部分浏览器都支持pageShow方法与persisted属性,并且需要的代码量只需要短短4行即可。
缺点:每种浏览器中BF Cache的机制是不同的,部分浏览器中的Bf Cache还是会重新执行js代码,会造成重复渲染效果。当然这篇文章中我们只考虑Ios中的微信页面, 所以是不存在问题。


链接: https://www.fly63.com/article/detial/3604

js判断是否是微信浏览器方法总结【整理4种方式】

在实际开发中,我们需要知道当前的浏览器是微信内置的浏览器,那么如何判断呢?以下提示了四种方法,每一种都可以进行判断是否是微信浏览器。

用cookie解决新版微信中H5页面底部白条问题

实现思路是,引入cookie功能,创建一个存储访客微信用户信息的cookie。当用户首次访问时,通过oauth授权获取用户信息,并存储于cookie中。当用户再次访问时,判断是否有相应cookie来调取用户信息,这样就不会触发二次授权。

微信JS支付代码 前端调用微信支付接口

跟大家分享一段微信支付的js代码片段、V3版的微信支付没有paySignKey参数、基本上是直接复制就可以使用了、改一改自己的参数就好了

H5微信JS-SDK实现分享朋友、朋友圈以及QQ自定义分享

先登录微信公众平台进入公众号设置的功能设置里填写JS接口域名,支持使用AMD/CMD标准加载方法,通过config接口注入权限验证配置,通过ready接口处理成功验证,通过error接口处理失败验证

解决微信公众平台网页授权两次或多次重定响应问题

在做微信公众平台网页授权时,发现每次请求授权链接时都会重定向链接redirect_uri都会自动请求两次,由于并发导致了一些问题,那么,为什么会请求两次呢?,调试时发现会访问两次,一次是301,页面重定向了,第二次跟第一次就差这个参数connect_redirect=1

微信跳转外部浏览器打开的代码实现

在我们做营销活动或推广宣传的时候,容易遇到域名被封,无法跳转app下载等情况。这时需要微信跳转外部浏览器打开页面的功能,目前ios只能通过遮罩层来提示用户,对于安卓可以直接跳转外面默认浏览器

微信投票找人拉票怎么算价格?微信买投票多少钱

首先大家为了取得一个良好的名次是可以理解的,但是需要合理的去操作,为什么这么说呢,如果你找到一个不负责的商家不给你控量,或者胡乱操作,往往无得其反,因小失大就不好,所以投票这个还是需要找一个专业的团队

微信已停止访问该网页解决方法分享

由于微信限制比较严格,域名一不小心就被判定是诱导分享的。所以,公司内部决定调研一套稳定、快速、正确率高的微信域名拦截检测查询接口。开发组尝试谷歌搜索了一段时间,发现很少把源码及原理分享出来的。后来我们摸索了几天

微信开发-自定义分享卡片-node.js实现

本篇主要讲述,如何在微信中打开自家的页面,在然后在用户分享的时候,能由我们自定义分享出去后,展示的页面卡片中的页面标题、页面描述、页面图片和分享链接。

解决微信返回上一页之后,页面不刷新

由于项目中使用了vue,使用了gulp和普通的页面跳转。并没有引入vue-router。所以不能使用 watch监控$router。微信公众号ios点击后退按钮,优选读取缓存,所以vue里的生命周期不会在进行调用。所以项目中执行隐藏分享qq,空间。等功能不被再次执行。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!