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

2023-02-13  本文已影响0人  我叫Aliya但是被占用了

两种方法

1. window 监听 focus | blur方法

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

优点:兼容性好

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

from caniuse.com,focus & blur不冒泡,focusin & focusout 冒泡

2. window 监听 visibilitychange方法(兼容性不好,需要pagehide辅助)

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

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

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

上一篇下一篇

猜你喜欢

热点阅读