判断浏览器返回页面，app内嵌h5离开返回页面

BFCache是一种浏览器优化，可实现即时前进和后退载入页面。它改善了用户的浏览体验，尤其是那些网络或设备速度较慢的用户。

在APP站内嵌套h5页面,判断进入拨号页返回情况:

• 我们需要通过visibilitychange

• 通过在点击时修改一个状态值,回来时和上面的方法进行判断

  const isClick=false // 是否点击了离开页面按钮
  const isShowPop=false // 是否显示弹窗
  document.addEventListener('visibilitychange', () => {
      if (document.visibilityState == "visible") {
        if (isClick) {
          isShowPop = true
        }
        isClick = false
      } else {}
  })
  

如果是在浏览器里面,判断进入拨号页(三方客服链接)返回情况:

• 在浏览器里面如果是离开了页面还是可以通过visibilitychange判断,但是跳转的是三方客服链接,那我我们回到页面,页面是会重新刷新的,我们需要知道是否返回了,就需要通过performance.getEntriesByType('navigation')[0].type

• 同时通过在点击时修改一个状态值,回来时和上面的方法进行判断

  const isClick=false // 是否点击了离开页面按钮
  const isShowPop=false // 是否显示弹窗
  const pageshowFn=(event)=> {
    const navigationType = performance.getEntriesByType('navigation')[0].type
    const {persisted = null} = event
    if (persisted || navigationType == 'back_forward') {
      isShowPop = true
      isClick = false
  }
  }
  window.removeEventListener('pageshow', pageshowFn)
  window.addEventListener('pageshow', pageshowFn)
  // 页面初次进入需要调用
  pageshowFn({})
  
  

往返缓存(BFCache)具体详解