是否有一种可靠的跨浏览器方法来检测标签是否有焦点。

这个场景是,我们有一个定期轮询股票价格的应用程序,如果页面没有焦点,我们可以停止轮询并节省所有人的交通噪音,特别是当人们喜欢打开不同投资组合的几个选项卡时。

是窗口。打开模糊和窗口。Onfocus这个选项?


当前回答

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

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

其他回答

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

这个错误是当你在焦点窗口上打开一个开发人员控制台并点击它的任何地方时,开发人员控制台现在有焦点,在这个点窗口。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

我会这样做(参考http://www.w3.org/TR/page-visibility/):

    window.onload = function() {

        // check the visiblility of the page
        var hidden, visibilityState, visibilityChange;

        if (typeof document.hidden !== "undefined") {
            hidden = "hidden", visibilityChange = "visibilitychange", visibilityState = "visibilityState";
        }
        else if (typeof document.mozHidden !== "undefined") {
            hidden = "mozHidden", visibilityChange = "mozvisibilitychange", visibilityState = "mozVisibilityState";
        }
        else if (typeof document.msHidden !== "undefined") {
            hidden = "msHidden", visibilityChange = "msvisibilitychange", visibilityState = "msVisibilityState";
        }
        else if (typeof document.webkitHidden !== "undefined") {
            hidden = "webkitHidden", visibilityChange = "webkitvisibilitychange", visibilityState = "webkitVisibilityState";
        }


        if (typeof document.addEventListener === "undefined" || typeof hidden === "undefined") {
            // not supported
        }
        else {
            document.addEventListener(visibilityChange, function() {
                console.log("hidden: " + document[hidden]);
                console.log(document[visibilityState]);

                switch (document[visibilityState]) {
                case "visible":
                    // visible
                    break;
                case "hidden":
                    // hidden
                    break;
                }
            }, false);
        }

        if (document[visibilityState] === "visible") {
            // visible
        }

    };  

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


var focused = true;

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

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

这是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);

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

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