Bootstrap

window对象监听浏览器页签之间的切换状态;前端监听浏览器切换页签的触发时机

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