HTML5 API --- visibilitychange页面可见性改变事件

这个是在做唤醒app时用到的,当时做出来的最终实现效果和京东的很相似。

visibilitychange事件是浏览器新添加的一个事件,当浏览器的某个标签页切换到后台,或从后台切换到前台时就会触发该消息,现在主流的浏览器都支持该消息。

下面是当初做功能时查到的小栗子~,有时间再把我写的功能代码也整理一下

<body onload="load()">
function onVisibilityChanged(event) {
  var hidden = event.target.webkitHidden;
  if (hidden)
    audioElement.pause();
  else
    audioElement.play();
}
function load() {
  document.addEventListener("webkitvisibilitychange", onVisibilityChanged, false);

注:
(1)微信内置的浏览器因为没有标签,所以不会触发该事件。
(2)手机端直接按Home键回到桌面,也不会触发该事件。
(3)PC端浏览器失去焦点不会触发该事件,但是最小化,或回到桌面会触发。

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

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,001评论 19 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,638评论 25 708
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,259评论 4 61
  • 寒潭湛湛映蓝天, 魅力霜柳, 倒立水仙, 嫣然歇止冬之眠。 翩翩天地一瞬间, 情系丝弦。 天籁阑珊, 色空迁徙幻灯篇。
    真如自在阅读 281评论 2 3
  • 难以想象,30岁的自己是什么样子的。弟弟考上了大学,我唠唠叨叨告诉他一些大学的注意事情,看着他不耐烦的表情,突...
    Fairy好菇凉_598c阅读 146评论 0 0