BestDI / BestDI.github.io

Mia's Home
https://bestdi.github.io
1 stars 0 forks source link

🎃 Funny Things - 有趣的Js代码片段 #60

Open BestDI opened 3 years ago

BestDI commented 3 years ago

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

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 = '显示';
    }
});