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

admin2024-07-10  9

第一种:会将任何鼠标点进或点出浏览器的操作监听;同页面也会触发
// 窗口获得焦点时的回调函数
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);
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!