visibilitychange监听页面退到后台

document添加visibilitychange事件

需要有前缀,-webkit- 、 -o-、-ms-、-moz-…
可以用hidden 或者 visibilityState 是否是document属性来获取前缀

 const getHiddenProp = () => {
  const prefixes = ['webkit', 'moz', 'ms', 'o'];

  // if 'hidden' is natively supported just return it
  if ('hidden' in document) return 'hidden';

  // otherwise loop over all the known prefixes until we find one
  for (let i = 0; i < prefixes.length; i++) {
    if ((`${prefixes[i]}Hidden`) in document) {
      return `${prefixes[i]}Hidden`
    }
  }

  // otherwise it's not supported
  return null;
}

visibilityState:visible | hidden
hidden: true | false

兼容性:iOS Safari 7开始支持
Android浏览器4.4开始支持,但是实测,安卓系统4,5 Android Webview不能支持这个事件的监听,所以还是要根据native端具体去测

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,568评论 1 11
  • Mobile Web Favorites 参与贡献 移动前端开发收藏夹,欢迎使用Issues以及 Pull Req...
    柴东啊阅读 819评论 0 2
  • (一)-webkit-tap-highlight-color 想要禁用这个高亮,设置颜色的alpha值为0即可。 ...
    毛线内裤阅读 491评论 0 0
  • 在这个城市里有时我就像是毫无相干的人类,想要当我在地球玩累了就跑回火星继续过我快乐的生活,而我,始终再也回不去了。...
    Remote阅读 101评论 0 1
  • 出差几天,中断了输出,罪过罪过。上个章节描述了新主管在刚开始工作后容易犯的错误,本章开始描述方法论,怎么解决这个问...
    追求幸福的时光阅读 230评论 0 0