码迷,mamicode.com
首页 > Web开发 > 详细

JS 监听浏览器标签页显示隐藏

时间:2019-09-12 18:03:23      阅读:256      评论:0      收藏:0      [点我收藏+]

标签:doc   乐视   nload   放音   播放   只读   可见性   系统   OLE   

JS 监听浏览器标签页显示隐藏

API
  • document.hidden
    判断页面是否隐藏的布尔值。页面隐藏包括 页面在后台标签页中 或者 浏览器最小化

  • document.visibilityState
    (只读属性), 返回document的可见性,4个值:
    • hidden:文档处于背景标签页或者窗口处于最小化状态,或者操作系统正处于 ‘锁屏状态‘

    • visible:此页面在前景标签页中,并且窗口没有最小化

    • prerender:页面在屏幕外执行预渲染处理 document.hidden 的值为 true

    • unloaded:页面正在从内存中卸载
  • visibilitychange事件
    当标签页从可见变为不可见或者从不可见变为可见时(包括标签页切换浏览器最小化),会触发该事件
document.addEventListener('visibilitychange', function() {
    var isHidden = document.hidden;
    console.log(document.visibilityState)
    if (isHidden) {
        document.title = '隐藏';
    } else {
        document.title = '显示';
    }
});

浏览器兼容性

Chrome (Webkit) Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
33+(-webkit-) 56+(-moz-) 10+(-ms-)

适用场景

标签页隐藏的时候停止播放音乐视频停止一些不必要的轮询

JS 监听浏览器标签页显示隐藏

标签:doc   乐视   nload   放音   播放   只读   可见性   系统   OLE   

原文地址:https://www.cnblogs.com/gongxiansheng/p/11513149.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!