App内Ios页面返回不刷新

场景：

业务场景： 首页页面进入二级页面后，二级页面的修改对一级页面的展示有影响，在同一个webView中跳转，页面返回到首页不刷新页面，导致数据无法更新。

解决方案：

1. 在框架的router里加监听，vue-router里有beforeEnter 监听到ios返回事刷新页面，
2. 通过sessionStorage等去对首页的url做存储，返回会匹配到已有url，刷新页面
3. 使用onPageShow监听页面变化
4. 拿板凳坐在ios开发小哥哥旁边，给他揉肩

最后使用了onPageShow 来对页面做监听

附上代码

document.body.onpageshow = (event) => {
      if (ENV.isIOS && event.persisted) {
                Bridge.exec('showQRCodeGuide', navMenu)
                actionMenus(navMenu)
                this.refresh()
          }
    }

这里 event.persisted =true 从缓存读取页面
event.persisted =false 不从缓存读取页面
这里回顾一下window的事件
DOMContentLoaded： 当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完全加载。
beforeunload：当浏览器窗口关闭或者刷新时，会触发beforeunload事件。当前页面不会直接关闭，可以点击确定按钮关闭或刷新，也可以取消关闭或刷新。
比如可以用于：离开页面保存修改，离开页面确认
load：在文档装载完成后会触发 load 事件。此时，在文档中的所有对象都在DOM中，所有图片，脚本，链接以及子框都完成了装载。
pageshow：事件类似于onload事件，onload 事件在页面第一次加载时触发， onpageshow 事件在每次加载页面时触发，即 onload 事件在页面从浏览器缓存中读取时不触发
为了查看页面是直接从服务器上载入还是从缓存中读取，你可以使用 PageTransitionEvent 对象的 persisted 属性来判断
document.ready 是DOM结构绘制完毕后就执行，不必等到加载完毕。==DOMContentLoaded

image.png