ios跳转页面回退不刷新问题&&解决方案

问题

用react开发的H5项目在移动端中遇到了兼容性的问题：
在页面a，点击提交按钮后，按钮状态置灰，并跳转到页面b，再从b页面退回到a页面，
在Android手机中没有问题，a页面正常显示。
在IOS手机中，a页面的提交按钮仍然是置灰状态，不可点击。

分析

Android：
跳转路由再回来后触发了页面刷新，触发componentDidMount等生命周期，按钮状态刷新，重新变为了可点击状态。

ios:
跳转路由再回来，不会触发页面刷新，也不会触发componentDidMount等生命周期，一直保持着跳走之前的状态。

解决方案

初步解决方案：
在跳走之前把按钮状态重新设置为可点击状态。

window.location.href = 'b.html';

setTimeout(() => {//setTimeout解决视觉上按钮状态闪动问题
	this.setState({
		checkSubmitFlg: true
	});
}, 100);

新问题

在网络环境较差情况下，下一个页面还没loading好，所以会先触发setTimeout里的逻辑，导致页面还没跳走，按钮就重新变得可点击了。

尝试的其他解决方案

onpageshow

onpageshow 事件在用户浏览网页时触发。 onpageshow 事件类似于 onload 事件，onload
事件在页面第一次加载时触发， onpageshow 事件在每次加载页面时触发，即 onload 事件在页面从浏览器缓存中读取时不触发。

利用onpageshow，主动刷新页面

    var browserRule = /^.*((iPhone)|(iPad)|(Safari))+.*$/;
    if (browserRule.test(navigator.userAgent)) {
        window.onpageshow = function(event) {
                window.location.reload()
        };
    }

优化1

由于onpageshow 在页面首次加载时也会触发，为防止出现无限刷新的情况，加一些判断吧

只读属性persisted代表一个页面是否从缓存中加载的

PerformanceNavigation接口呈现了如何导航到当前文档的信息。

    var browserRule = /^.*((iPhone)|(iPad)|(Safari))+.*$/;
    if (browserRule.test(navigator.userAgent)) {
        window.onpageshow = function(event) {
              if (event.persisted || window.performance && window.performance.navigation.type == 2) {//页面是从缓存中获取的数据||是通过浏览器后退来到该页面
		window.location.reload();
	}
        };
    }

优化2

担心利用event.persisted和window.performance判断不可靠，如果出现无限刷新的情况，那就麻烦大了，所以还是自己做一些判断可靠些

自己加一个标识isBack，存在sessionStorage里面，

isBack初始化为false，在跳转页面的逻辑里面，把isBack变为true，刷新完之后再变成false。
这样只有在ios中回退回来的时候才会触发页面刷新。

  var browserRule = /^.*((iPhone)|(iPad)|(Safari))+.*$/;
    if (browserRule.test(navigator.userAgent)) {
        window.onpageshow = function(event) {
        	let isBack = sessionStorage.getItem("isBack")
              if (isBack) {
				window.location.reload();
				sessionStorage.setItem("isBack",false)
			}
        };
    }

sessionStorage.setItem("isBack",true)
window.location.href = 'b.html';

参考：
https://blog.csdn.net/qq_39903567/article/details/114981256

本文链接：https://blog.csdn.net/qq_39903567/article/details/117921945