检测浏览器标签是否有焦点
是否有可靠的跨浏览器方式来检测标签是否有焦点。
情景是，我们有一个应用程序，定期轮询股票价格，如果页面没有焦点，我们可以停止投票，并节省每个人的交通噪音，特别是因为人们是打开不同投资组合的几个标签的粉丝。
是window.onblur和window.onfocus这个选项？
是的， 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 ）
在search这个问题时，我发现了一个build议，即页面可见性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而没有前缀。 为了与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 } };
跨浏览器jQuery解决scheme！ 原始可用在GitHub
有趣和易于使用！
下面的插件将通过您的标准testing各种版本的IE浏览器，Chrome浏览器，火狐浏览器，Safari浏览器等，并build立相应的申报方法。 它还处理以下问题：
- onblur | .blur / onfocus | .focus“ 重复 ”呼叫
- 窗口通过select替代应用程序，像单词一样失去焦点
-
- 这往往是不可取的，因为如果你有一个银行页面打开，并且它的onblur事件告诉它掩盖页面，那么如果你打开计算器，你不能再看到页面！
- 在页面加载时不触发
使用如下简单： 向下滚动到“ 运行代码段 ”
$.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>
令人惊讶的是没有人提到document.hasFocus
if (document.hasFocus()) console.log('Tab is active')
MDN有更多的信息。
