JS 监听浏览器当前页签(Tab页)的切换(可见性变化)事件

提到浏览器页签可见性的相关事件,我们可能会联想到Window对象上的onpageshow和onpagehide事件,不过这两个事件的表现行为更类似于onload和onunload事件。

实际上监听页签的切换,我们需要用的window.document.visibilitychange事件!

const handler = () => {
  // 也可以通过document.hidden属性(布尔类型)来判断
  // window.document.hidden (True/False)

  // document.visibilityState拥有两种字符串枚举值('visible' 和 'hidden')
  if (window.document.visibilityState === 'visible') {
    // 当页签处于可见状态,TODO
  } else {
    // 当页签处于不可见状态(hidden),TODO
  }
};

window.document.addEventListener('visibilitychange', handler);

 

上一篇:jquery监听页面滚动条滚动事件


下一篇:JavaScript-DOM