h5返回到上一页ios手机页面不刷新

1 篇文章 0 订阅

最近在写页面的时候,当用户点击保存后返回上一页需要刷新页面显示出保存的新内容,但是奇怪的是IOS并没有相应刷新,安卓却没有对应问题。查了下资料是因为ios浏览器缓存机制。

第一次百度的方法好像并没有什么用,自己也很菜不清楚原因在哪

$(function () { 
  var isPageHide = false; 
  window.addEventListener('pageshow', function () { 
    if (isPageHide) { 
      window.location.reload(); 
    } 
  }); 
  window.addEventListener('pagehide', function () { 
    isPageHide = true; 
  }); 
})

原文链接:https://blog.csdn.net/u012637258/article/details/83063823

后来又百度重新找到一个方法
原文链接:https://www.cnblogs.com/chensv/p/9982716.html
解决方法:

//判断手机型号为IOS
var browserRule = /^.*((iPhone)|(iPad)|(Safari))+.*$/;
if (browserRule.test(navigator.userAgent)) {
     window.onpageshow = function(event) {
           if (event.persisted) {
                 window.location.reload()
           }
     };
}
//第二种方法
location.replace(document.referrer)

但其实我写的更麻烦

window.onpageshow=function(e){
		if(e.persisted || (window.performance && window.performance.navigation.type ==2)){
			window.location.reload()
		}
	}

另外加一个判断手机型号的方法

function checkMobileDevices() {
	var u = navigator.userAgent;
	var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
	var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
	//	alert('是否是Android:' + isAndroid);
	//	alert('是否是iOS:' + isiOS);
	if (isAndroid) { //安卓
		return "0";
	}
	if (isiOS) { //ios
		return "1";
	}
	if (!isAndroid && !isiOS) { //未知设备
		return "-1";
	}

}

引用(ps:多学点知识):

performanced的作用

Web Performance 接口允许网页中的 JavaScript 代码可以通过具体的函数(由 window 对象的 performance 属性提供)测量当前网页页面或者 web应用的性能。它能提供高精度的时间戳,可以更加精准的计算脚本运行的时间。

performance.navigation.type

performance.navigation.type(该属性返回一个整数值,表示网页的加载来源,可能有以下4种情况):
  0:网页通过点击链接、地址栏输入、表单提交、脚本操作等方式加载,相当于常数performance.navigation.TYPE_NAVIGATE。
  1:网页通过“重新加载”按钮或者location.reload()方法加载,相当于常数performance.navigation.TYPE_RELOAD。
  2:网页通过“前进”或“后退”按钮加载,相当于常数performance.navigation.TYPE_BACK_FORWARD。
  255:任何其他来源的加载,相当于常数performance.navigation.TYPE_RESERVED。
  另外:performance.navigation.redirectCount:表示网页经过重定向的次数。
  原链接:https://www.jianshu.com/p/447d90911e71

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值