js监听页面可见性、是否处于活跃

两种方法

  1. window 监听 focus | blur方法

用法:window.addEventListener('focus/blur', ...)

优点:兼容性好

缺点:移动设备的浏览器会有一种【标签管理】功能(safari 下是右下角的按钮,呈现为所有标签以 3D 效果排为一排),safari 在此时会认为已经 blur,其它移动设备浏览器没有测试

from caniuse.com,focus & blur不冒泡,focusin & focusout 冒泡
  1. window 监听 visibilitychange方法(兼容性不好,需要pagehide辅助)

用法:回调中使用 document.hidden或document.visibilityState属性检测页面可见性。

优点:移动设备的浏览器【标签管理】时不会被触发(未实践过)

缺点:MAC 合盖后无法触发此事件,会在下次打开电脑后快速的触发 2 次此事件(一次为失活,一次为重新活跃)

requestAnimationFrame

setInterval

window.open(
"https://developer.mozilla.org/zh-CN/docs/Web/API/Window/open",
"ewewew",
);

or
<a href="http://www.mozilla.com/" target="ewewew">
External Link
</a>

最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容