是否有可靠的跨浏览器方式来检测选项卡是否具有焦点。
场景是我们有一个应用程序定期轮询股票价格，如果页面没有焦点，我们可以停止轮询并为每个人节省交通噪音，特别是当人们喜欢打开具有不同投资组合的多个标签时。
是window.onblur和window.onfocus这个选项？
检测浏览器标签是否有焦点
IT技术
javascript
optimization
polling
2021-01-22 02:03:33
6个回答
是的，window.onfocus并且window.onblur应该为您的方案的工作：
http://www.thefutureoftheweb.com/blog/detect-browser-window-focus
重要编辑：此答案已过时。自从编写它以来，已经引入了 Visibility API（ mdn、 example、 spec）。这是解决这个问题的更好方法。
var focused = true;
window.onfocus = function() {
focused = true;
};
window.onblur = function() {
focused = false;
};
AFAIK，focus并且blur都支持......一切。（见http://www.quirksmode.org/dom/events/index.html）
在搜索这个问题时，我发现应该使用Page Visibility API的建议。根据 Can I Use：http : //caniuse.com/#feat=pagevisibility ，大多数现代浏览器都支持此 API 。
这是一个工作示例（源自此代码段）：
$(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。为了与 IE10 保持兼容，我保留了 Microsoft 特定的前缀。
我会这样做（参考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
}
};