解决浏览器差异导致从子页面回到父页面，父页面不刷新的问题

饮水思源为名

发布于 2018-09-06 11:26:38

2.5K0

发布于 2018-09-06 11:26:38

概述：

在做H5混合开发的时候总是会遇到浏览器差异、不兼容导致同样的代码，IOS和Andoird其中之一出现不可预见的问题。我的问题也是如此，我的需求是从父页面跳转子页面，子页面提交后返回父页面，并且父页面刷新。 Android的Chrome浏览器对这个需求就很容易支持，因为他每次页面重新显示的时候，都会刷新整个页面。而IOS的Safari浏览器出现了问题，Safari浏览器会读取缓存，不会重新刷新页面。

如何解决：

解决这个问题找到方法就很简单。总体思路是在子页面返回时，告知父页面刷新。并且只在IOS上执行这个操作，否则Android会刷新两遍。由于笔者对JS并不算精通，最初是想参考Android原生的回调操作，利用js实现页面回调，最后没能实现。然后考虑利用浏览器的生命周期，在H5中应该叫做事件，来处理。最后找到了onpageshow事件。它是在页面显示的时候响应，同时支持Chrome和Safari。由于项目特许原因，不能使用H5+的内容，笔者解决这个问题也是煞费苦心

示例代码

<body onpageshow="loadDetail()">
<script>
var loadDetail = function() {
                    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
                    var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1; //判断是否Safari浏览器
                    if(isSafari) {
                        window.localStorage.setItem("sfF5", "0");
                        getTaskDetailData();
                    }
                }
</script>

注意：

笔者在利用上述方法时，起初遇到了问题，在Chrome浏览器和Safari浏览器测试通过后，放在IOS手机上运行时发现onpageshow事件并不执行。最后发现是承载Html的IOS原生壳用了新的wkWebview导致，换回以前的WebView成功解决。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2018.07.25 ，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度