1、页面可见性
显示的页面:当前正在看的页面
隐藏的页面:我们没有看到的页面
2、给document添加visibilitychange事件,document.hidden为true则可见,为false则为隐藏,不同页面之间切换,触发visibilitychange事件。
document.addEventListener("visibilitychange", function(){
if(document.hidden){ //页面隐藏
document.title ="hidden";
}else { //页面显示
document.title = "visibile";
}
});
console.log(document.visibilityState); //显示时,输出visible
document.visibilityState表示页面的状态,取值为
'visible'
: 此时页面内容至少是部分可见. 即此页面在前景标签页中,并且窗口没有最小化.'hidden
' : 此时页面对用户不可见. 即文档处于背景标签页或者窗口处于最小化状态,或者操作系统正处于 '锁屏状态' .'prerender'
: 页面此时正在渲染中, 因此是不可见的 (considered hidden for purposes ofdocument.hidden
). 文档只能从此状态开始,永远不能从其他值变为此状态.注意: 浏览器支持是可选的.'unloaded
' : 页面从内存中卸载清除. 注意: 浏览器支持是可选的.