APP 内嵌H5, H5页面可见性改变事件 : visibilitychange_h5页面可见性改变事件ios-CSDN博客

本文链接：https://blog.csdn.net/szjSmiling/article/details/108258683

本文探讨了在APP内嵌H5场景下，通过监听visibilitychange事件解决H5页面数据不更新的问题。详细分析了不同场景下webview的行为，并提供了解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

经过和APP同时沟通可以确定, 两种情况:

原生入口–>H5–>返回原生;
这个情况下,原生会销毁H5的webview这种情况;
原生入口–>H5–>打开新的原生(如登录);
这个情况下,webview’会缓存,只能使用相关回调(如登陆后的回调;
原生入口–>H5–>第三方网站(如支付)
这个情况下,webview’会缓存

对于上述1和3的情况, 可以监听路由变化如:beforeRouteEnter进行逻辑处理, 亲测有效;

摘要:

本文主要描述的是本人在开发过程中遇到的问题, 以及如何利用 visibilitychange 解决的相关记录。

visibilitychange 事件, 简单的说就是 document 对象绑定的一个方法, 在H5页面 隐藏或者显示 的时候触发。

遇到的问题(H5, 指的是Vue的页面)

前景: APP 内嵌 H5 活动页面, 入口在原生, 活动页面有登陆状态的判断逻辑, 登陆为 APP 原生登陆, 登陆成功返回该活动页面;----- 流程图如下:

问题: 未登录进入时, 个人积分不展示, 原生登陆成功后返回该页面, 页面数据没有更新,还是未登录状态;经调试发现, 页面所有的钩子函数都不执行;`
猜测: APP内部打开H5, 然后离开H5跳转回原生页面, 因为(我们)APP 打开H5的webview是不销毁的(webview可以理解为一个容器,APP用来打开H5页面的,我的理解是类似于浏览器的一个窗口); 所以很可能是APP首次进入,就把H5页面包括资源全部缓存下来,下次在进入这个H5的时候,数据就不会更新了,使用的是之前缓存的数据.`

验证

网上查阅资料得到的一个方法, HTML的head总增加三个meta标签:
结果: IOS生效, android 不生效, 开始怀疑是不是缓存导致的, 为什么安卓不生效, 因为能力有限, 所以还是不太清楚原因;

`后面的注释, 是我自己的理解`
 <meta http-equiv="Pragma" content="no-cache">  <!-- 关闭缓存 -->
 <meta http-equiv="Cache-Control" content="no-cache"> <!-- 关闭缓存 -->
 <meta http-equiv="Expires" content="0"> <!-- 立即过期,也就是重新请求资源 -->

偶然发现 visibilitychange 这个方法, 于是就开始 google, 最终功夫不负有心人;
结果: 完美解决了我的问题, 在document.hidden === false的时候, 我重新请求数据接口,更新数据就可以了
理解: 感觉这种情况, 更像是APP把H5页面后台挂起,(或者通俗说是隐藏掉,用户不可见而已), H5页面还是一直存在, 所以页面不会重新加载, 更别说登陆前后数据变化了.

// Set the name of the hidden property and the change event for visibility
 var hidden, visibilityChange;
 if (typeof document.hidden !== "undefined") {
   // Opera 12.10 and Firefox 18 and later support hidden = "hidden";
   visibilityChange = "visibilitychange";
 } else if (typeof document.msHidden !== "undefined") {
   hidden = "msHidden";
   visibilityChange = "msvisibilitychange";
 } else if (typeof document.webkitHidden !== "undefined") {
   hidden = "webkitHidden";
   visibilityChange = "webkitvisibilitychange";
 }

 handleVisibilityChange() {
   if (document.hidden) { // 页面隐藏
     console.log(document.hidden, document.visibilityState)  // true 'hidden'
   } else { // 页面展示
     console.log(document.hidden, document.visibilityState)  // false 'visible'
   }
 }

 // Warn if the browser doesn't support addEventListener or the Page Visibility API
 if (typeof document.addEventListener === "undefined" || hidden === undefined) {
   console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
 } else {
   // Handle page visibility change   
   document.addEventListener(visibilityChange, handleVisibilityChange, false);
 }