H5跳转到原生页面,监听用户是否返回到H5

3,038 阅读1分钟

前言

最近一个需求,app 内嵌的 h5 需要做任务,但是任务是在一个原生的页面中,产品的需求是如果用户做了任务,返回 h5 后,任务自动标识为完成,一般情况下我们这安卓都会有一些操作后的返回监听,但是这次比较特殊,需要前端来做处理。

H5 的一个新特性正好可以监听页面的展示和隐藏

Document.hidden(只读属性)返回布尔值,表示页面是(true)否(false)隐藏。(当为 true 的时候说明页面隐藏了,当为 false 的时候说明展示了)

var hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkitHidden' : 'mozHidden' in document ? 'mozHidden' : null;
console.log(hiddenProperty);

document.addEventListener('visibilitychange', () => {
  if (document[hiddenProperty]) {
    //当离开H5 跳转到app原生的页面时,这里会被触发
    console.log('页面隐藏了');
  } else {
    //当从原生页面用户一系列操作后,返回H5的时候,这里会被触发
    console.log('页面展示了');
  }
});

在 PC 端可以通过通过切换 tab 来触发此事件

MDN 相关解析

这个特性都可以用来做什么呢?

  • 如果现在的 H5 有倒计时,用户离开当前 App,等会又回来,此时你会发现倒计时已经混乱了,这里可以用到这个属性,页面隐藏了先把定时器关掉,页面展示了在开始倒计时

  • 或者有的时候需要控制 h5 中视频或者音频的暂停和播放(当离开 H5 后有的视频和音频还在播放)