美文网首页
App内Ios页面返回不刷新

App内Ios页面返回不刷新

作者: 大嵩的格洛米 | 来源:发表于2021-09-07 21:36 被阅读0次

场景:

业务场景: 首页页面进入二级页面后,二级页面的修改对一级页面的展示有影响,在同一个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

相关文章

网友评论

      本文标题:App内Ios页面返回不刷新

      本文链接:https://www.haomeiwen.com/subject/pfyjiltx.html