简介
在前端开发中，我们经常需要检测浏览器选项卡是否具有焦点。这个功能可以用来优化用户体验，例如当用户切换到其他选项卡时暂停音乐播放或者减少 CPU 的占用率等。
检测方法
现代浏览器提供了一个 document.hasFocus() 方法来检测当前选项卡是否具有焦点。该方法返回一个布尔值，true 表示当前选项卡具有焦点，false 表示没有。
if (document.hasFocus()) {
// 当前选项卡具有焦点
} else {
// 当前选项卡没有焦点
}另外，还可以使用 window.addEventListener() 监听 blur 和 focus 事件，当选项卡失去焦点或获得焦点时触发相应的回调函数。
window.addEventListener('blur', function() {
// 当前选项卡失去焦点
});
window.addEventListener('focus', function() {
// 当前选项卡获得焦点
});兼容性
document.hasFocus() 方法和 blur/focus 事件均为 W3C 标准，目前主流浏览器均已支持。
实例演示
下面是一个简单的例子，当用户切换到其他选项卡时暂停音乐播放。
-- -------------------- ---- ------- ------ ------------ --------- ------- --------------- ------------------ -------- -------- --- ----- - ----------------------------------- ------------------------------- ---------- - -------------- --- -------------------------------- ---------- - ------------- --- ---------
总结
通过检测浏览器选项卡是否具有焦点，我们可以优化用户体验并降低资源的消耗。同时，这个功能在实现上也非常简单，只需要使用 document.hasFocus() 方法或者 blur/focus 事件即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10660
