是否有可靠的跨浏览器方法来检测选项卡是否具有焦点。
场景是我们有一个定期轮询股票价格的应用程序，如果页面没有焦点，我们可以停止轮询并为每个人节省交通噪音，特别是当人们喜欢打开几个不同的标签时投资组合。
window.onblur 和 window.onfocus 可以选择吗？
【问题讨论】：
标签： javascript optimization polling
是的，window.onfocus 和 window.onblur 应该适用于您的场景：
http://www.thefutureoftheweb.com/blog/detect-browser-window-focus
【讨论】：
onfocus 是跨浏览器，你提到的事件仅限于 IE，我不明白为什么这会被你认为是个好笔记..
惊讶地发现没有人提到document.hasFocus
if (document.hasFocus()) console.log('Tab is active')
【讨论】：
重要编辑：此答案已过时。自编写以来，引入了可见性 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。
这是一个工作示例（源自this snippet）：
$(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 浏览器提供前缀属性，但我删除了该实现，因为这些浏览器已经提供不带前缀的 Page Visibility 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
}
};
【讨论】：
发布此答案是因为我在接受的答案中发现了一个错误。
错误是当您在焦点窗口上打开开发者控制台并单击它的任意位置时，开发者控制台现在具有焦点，此时 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
【讨论】：
跨浏览器 jQuery 解决方案！ Raw 可在GitHub获得
以下插件将通过您对各种版本的 IE、Chrome、Firefox、Safari 等的标准测试，并相应地建立您声明的方法。它还处理以下问题：
使用很简单：向下滚动到'Run Snippet'
$.winFocus(function(event, isVisible) {
console.log("Combo\t\t", event, isVisible);
});
// OR Pass False boolean, and it will not trigger on load,
// Instead, it will first trigger on first blur of current tab_window
$.winFocus(function(event, isVisible) {
console.log("Combo\t\t", event, isVisible);
}, false);
// OR Establish an object having methods "blur" & "focus", and/or "blurFocus"
// (yes, you can set all 3, tho blurFocus is the only one with an 'isVisible' param)
$.winFocus({
blur: function(event) {
console.log("Blur\t\t", event);
},
focus: function(event) {
console.log("Focus\t\t", event);
}
});
// OR First method becoms a "blur", second method becoms "focus"!
$.winFocus(function(event) {
console.log("Blur\t\t", event);
},
function(event) {
console.log("Focus\t\t", event);
});
/* Begin Plugin */
;;(function($){$.winFocus||($.extend({winFocus:function(){var a=!0,b=[];$(document).data("winFocus")||$(document).data("winFocus",$.winFocus.init());for(x in arguments)"object"==typeof arguments[x]?(arguments[x].blur&&$.winFocus.methods.blur.push(arguments[x].blur),arguments[x].focus&&$.winFocus.methods.focus.push(arguments[x].focus),arguments[x].blurFocus&&$.winFocus.methods.blurFocus.push(arguments[x].blurFocus),arguments[x].initRun&&(a=arguments[x].initRun)):"function"==typeof arguments[x]?b.push(arguments[x]):
"boolean"==typeof arguments[x]&&(a=arguments[x]);b&&(1==b.length?$.winFocus.methods.blurFocus.push(b[0]):($.winFocus.methods.blur.push(b[0]),$.winFocus.methods.focus.push(b[1])));if(a)$.winFocus.methods.onChange()}}),$.winFocus.init=function(){$.winFocus.props.hidden in document?document.addEventListener("visibilitychange",$.winFocus.methods.onChange):($.winFocus.props.hidden="mozHidden")in document?document.addEventListener("mozvisibilitychange",$.winFocus.methods.onChange):($.winFocus.props.hidden=
"webkitHidden")in document?document.addEventListener("webkitvisibilitychange",$.winFocus.methods.onChange):($.winFocus.props.hidden="msHidden")in document?document.addEventListener("msvisibilitychange",$.winFocus.methods.onChange):($.winFocus.props.hidden="onfocusin")in document?document.onfocusin=document.onfocusout=$.winFocus.methods.onChange:window.onpageshow=window.onpagehide=window.onfocus=window.onblur=$.winFocus.methods.onChange;return $.winFocus},$.winFocus.methods={blurFocus:[],blur:[],focus:[],
exeCB:function(a){$.winFocus.methods.blurFocus&&$.each($.winFocus.methods.blurFocus,function(b,c){this.apply($.winFocus,[a,!a.hidden])});a.hidden&&$.winFocus.methods.blur&&$.each($.winFocus.methods.blur,function(b,c){this.apply($.winFocus,[a])});!a.hidden&&$.winFocus.methods.focus&&$.each($.winFocus.methods.focus,function(b,c){this.apply($.winFocus,[a])})},onChange:function(a){var b={focus:!1,focusin:!1,pageshow:!1,blur:!0,focusout:!0,pagehide:!0};if(a=a||window.event)a.hidden=a.type in b?b[a.type]:
document[$.winFocus.props.hidden],$(window).data("visible",!a.hidden),$.winFocus.methods.exeCB(a);else try{$.winFocus.methods.onChange.call(document,new Event("visibilitychange"))}catch(c){}}},$.winFocus.props={hidden:"hidden"})})(jQuery);
/* End Plugin */
// Simple example
$(function() {
$.winFocus(function(event, isVisible) {
$('td tbody').empty();
$.each(event, function(i) {
$('td tbody').append(
$('<tr />').append(
$('<th />', { text: i }),
$('<td />', { text: this.toString() })
)
)
});
if (isVisible)
$("#isVisible").stop().delay(100).fadeOut('fast', function(e) {
$('body').addClass('visible');
$(this).stop().text('TRUE').fadeIn('slow');
});
else {
$('body').removeClass('visible');
$("#isVisible").text('FALSE');
}
});
})body { background: #AAF; }
table { width: 100%; }
table table { border-collapse: collapse; margin: 0 auto; width: auto; }
tbody > tr > th { text-align: right; }
td { width: 50%; }
th, td { padding: .1em .5em; }
td th, td td { border: 1px solid; }
.visible { background: #FFA; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h3>See Console for Event Object Returned</h3>
<table>
<tr>
<th><p>Is Visible?</p></th>
<td><p id="isVisible">TRUE</p></td>
</tr>
<tr>
<td colspan="2">
<table>
<thead>
<tr>
<th colspan="2">Event Data <span style="font-size: .8em;">{ See Console for More Details }</span></th>
</tr>
</thead>
<tbody></tbody>
</table>
</td>
</tr>
</table>【讨论】：
jQuery(window).blur/focus 的基本功能，这是许多人不想要的，这也是我制作这个插件的原因之一。该插件旨在帮助提供 jQuery 尚未提供的功能
这是 10 岁。这是一个较新的版本：Pause/resume CSS animations when switching tabs
基本使用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);
【讨论】：