检测浏览器选项卡是否具有焦点

Question

是否有可靠的跨浏览器方式来检测选项卡是否具有焦点.

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

是window.onblur和window.onfocus这个选项？

Answer 1

是的,window.onfocus并且window.onblur应该为您的方案的工作:

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

Answer 2

重要编辑:这个答案已经过时了.自编写以来,已经引入了Visibility API( mdn, example, spec).这是解决这个问题的更好方法.

var focused = true;

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

据我所知,focus并且blur都支持...一切.(见http://www.quirksmode.org/dom/events/index.html)

Answer 3

在搜索此问题时,我发现建议应使用Page Visibility API.大多数现代浏览器都支持此API,我可以使用:http://caniuse.com/#feat=pagevisibility.

这是一个工作示例(源自此代码段):

$(document).ready(function() {
  var hidden, visibilityState, visibilityChange;

  if (typeof document.hidden !== "undefined") {
    hidden = "hidden", visibilityChange = "visibilitychange", visibilityState = "visibilityState";
  } else if (typeof document.msHidden !== "undefined") {
    hidden = "msHidden", visibilityChange = "msvisibilitychange", visibilityState = "msVisibilityState";
  }

  var document_hidden = document[hidden];

  document.addEventListener(visibilityChange, function() {
    if(document_hidden != document[hidden]) {
      if(document[hidden]) {
        // Document hidden
      } else {
        // Document shown
      }

      document_hidden = document[hidden];
    }
  });
});

更新:上面的示例曾经为Gecko和WebKit浏览器提供了前缀属性,但我删除了该实现,因为这些浏览器现在提供的页面可见性API没有前缀.我保留了Microsoft特定的前缀,以便与IE10保持兼容.

Answer 4

是的,那些应该适合你.您刚刚提醒我,我遇到的这个链接利用了这些技术.有趣的阅​​读

Answer 5

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

该错误是当您在聚焦窗口上打开开发人员控制台并单击其上的任意位置时，开发人员控制台现在具有焦点，此时window.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

Answer 6

很惊讶没有人提到 document.hasFocus

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

MDN有更多信息.

Answer 7

我会这样做（参考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
        }

    };