检查窗口是否有焦点

我需要检查用户是否有焦点窗口，我目前正在这样做：

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

每当我需要检查用户是否有焦点窗口时，我只是做if(isonfocus==true) 。

问题：如果用户在页面加载之前失去焦点，即使我这样做if(isonfocus==true)它也将返回true，即使窗口不在焦点上，并且将var定义为false var isonfocus=false; 会做相反的事情。

有人能帮我吗？ 谢谢。

UPDATE
想象一下PTC（付费点击）网站，当您点击要查看的广告时，大多数网站都会validation用户是否实际看到了广告客户网站（有焦点）还是没有（失去焦点）。
这与我需要的类似，我需要一种方法来validation用户是否在焦点上有窗口（包含iframe）。
要获得焦点，用户可以单击iframe，文档或选项卡。
请注意，这需要适用于所有主流浏览器。

Answer 1

为什么不使用hasFocus方法，例如

 if (document.hasFocus()) { ... } 

---

如果您还需要处理iframe ，那么您的支票就会成为或者例如

 function isFocused() { return document.hasFocus() || document.getElementById('iframe').contentWindow.document.hasFocus(); } 

Answer 2

 var has_focus = true; function loading_time() { $(":focus").each(function() { if($(this).attr("id")=="iframeID") has_focus = true; }); if(has_focus==true) alert('page has focus'); else alert('page has not focus'); setTimeout("loading_time()", 2000); } window.onblur = function(){ has_focus=false; } window.onfocus = function(){ has_focus=true; } $(window).load(function(){ setTimeout("loading_time()", 2000); }); 

为了提高效率，你需要var has_focus = false; 并让用户单击页面上的某个位置。

Answer 3

您可以使用document.visibilityState来了解页面是否处于焦点。

Answer 4

跨浏览器jQuery解决方案！ 以下插件将针对各种版本的IE，Chrome，Firefox，Safari等进行标准测试。并相应地建立您声明的方法。 它还涉及以下问题：

• 计时器！ ewwww！
• onblur | .blur / onfocus | .focus“ 复制 ”调用
• 窗口失去焦点通过选择备用应用程序，如单词
• • 这往往是不可取的，因为，如果您打开银行页面，并且它的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); }); 

---

这里有新的 和 改进的 版本， 包括 vanilla 和 jQuery ！

---

 /* 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( $('').append( $('', { text: i }), $('', { 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; } 

  
See Console for Event Object Returned
 
 
 
Is Visible?
 
TRUE
 
 
 
 
 
 
 
Event Data { See Console for More Details }
 
 
 
 
 
 
  

Answer 5

如果您不关心Opera支持，可以使用document.hasFocus()方法获得更好的结果。 有关详细信息，请参见此处 。