奇怪的是没有人提到document.hasFocus

if (document.hasFocus()) console.log('Tab is active')

MDN有更多信息。

这是10年前的。下面是一个更新的版本:切换选项卡时暂停/恢复CSS动画

基本上使用Mozillas Javascript https://developer.mozilla.org/en-US/docs/Web/API/Window/focus_event

 function pause() {

 //Do something

 }

 function play() {

 //Do something

 }
 window.addEventListener('blur', pause);
 window.addEventListener('focus', play);

重要编辑:这个答案已经过时了。在编写它之后，引入了可见性API (mdn，示例，规范)。这是解决这个问题更好的办法。

var focused = true;

window.onfocus = function() {
    focused = true;
};
window.onblur = function() {
    focused = false;
};

AFAIK，焦点和模糊都支持…所有东西。(见http://www.quirksmode.org/dom/events/index.html)

是的,窗户。Onfocus和window。Onblur应该适用于你的场景:

http://www.thefutureoftheweb.com/blog/detect-browser-window-focus

一个React钩子版本，基于上面所有这些优秀的先生们的回答:

import { useEffect, useState } from 'react';

const EVENT_NAME = 'visibilitychange';

export const useTabFocus = () => {
    const [hasFocus, setHasFocus] = useState(isVisible());

    useEffect(() => {
        const onVisibilityChange = () => {
            setHasFocus(isVisible());
        };

        document.addEventListener(EVENT_NAME, onVisibilityChange);

        return () => {
            document.removeEventListener(EVENT_NAME, onVisibilityChange);
        };
    }, []);

    return hasFocus;
};

const isVisible = () => document.visibilityState === 'visible';

发布这个答案是因为我在接受的答案中发现了一个错误。

这个错误是当你在焦点窗口上打开一个开发人员控制台并点击它的任何地方时，开发人员控制台现在有焦点，在这个点窗口。Onfocus或window。Onblur没有任何效果。

这是我的解，

document.addEventListener("visibilitychange", function() {
    if (document.visibilityState === 'visible') {
        console.log('has focus');
    } else {
        console.log('lost focus');
    }
});

阅读更多信息https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event