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

梦里梦外; 2022-10-07 00:53 311阅读 0赞

### 文章目录 ###

*  问题
 *  分析
 *  解决方案
 *  新问题
 *  尝试的其他解决方案
 *  onpageshow
 *   *  优化1
     *  优化2

# 问题 #

用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接口呈现了如何导航到当前文档的信息。

## 优化2 ##

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

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

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

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_114981256]

[本文链接：https://blog.csdn.net/qq\_39903567/article/details/117921945][https_blog.csdn.net_qq_39903567_article_details_117921945]

[https_blog.csdn.net_qq_39903567_article_details_114981256]: https://blog.csdn.net/qq_39903567/article/details/114981256
[https_blog.csdn.net_qq_39903567_article_details_117921945]: https://blog.csdn.net/qq_39903567/article/details/117921945