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

Posted 2020-11-13 卑面派对

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-)

适用场景

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