window对象监听浏览器页签之间的切换状态
记录两种办法
第一种:会将任何鼠标点进或点出浏览器的操作监听;同页面也会触发
// 窗口获得焦点时的回调函数
function onWindowFocus() {
console.log('窗口获得焦点');
querySubmit()
}
// 窗口失去焦点时的回调函数
function onWindowBlur() {
console.log('窗口失去焦点');
}
// 添加事件监听器
window.addEventListener('focus', onWindowFocus);
window.addEventListener('blur', onWindowBlur);
第二种:此方法只在切屏或切换页签触发
const handler = () => {
// 也可以通过document.hidden属性(布尔类型)来判断
// window.document.hidden (True/False)
// document.visibilityState拥有两种字符串枚举值('visible' 和 'hidden')
if (window.document.visibilityState === 'visible') {
// 当页签处于可见状态,TODO
console.log("出现")
} else {
// 当页签处于不可见状态(hidden),TODO
console.log("消失")
}
};
window.document.addEventListener('visibilitychange', handler);