我需要检查用户是否有焦点窗口,我现在正在这样做:
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;
也会反过来。
有人能帮助我吗?感谢。
更新
想象一下PTC(付费点击)网站,当您点击要查看的广告时,大多数网站都会验证用户是否实际看到了广告客户网站(有焦点)还是没有(失去焦点)。
这与我需要的类似,我需要一种方法来验证用户是否在焦点上有窗口(包含iframe)。
要获得焦点,用户可以单击iframe,文档或选项卡
请注意,这需要适用于所有主流浏览器。
答案 0 :(得分:42)
为什么不使用hasFocus方法,例如
if (document.hasFocus()) {
...
}
如果您还需要处理iframe
,那么您的支票就会变成其中一个或者例如。
function isFocused() {
return document.hasFocus() || document.getElementById('iframe').contentWindow.document.hasFocus();
}
答案 1 :(得分:10)
您可以使用document.visibilityState
来了解网页是否清晰对焦。
答案 2 :(得分:4)
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;
并让用户点击页面上的某个位置。
答案 3 :(得分:2)
跨浏览器jQuery解决方案! 以下插件将针对各种版本的IE,Chrome,Firefox,Safari等进行标准测试。并相应地建立您声明的方法。它还涉及以下问题:
使用就像:
$.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);
});
New&improvedversion,madeforbothvanillaandjQueryfoundhere!
/* 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');
}
});
})
&#13;
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; }
&#13;
<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>
&#13;
答案 4 :(得分:1)
如果您不关心Opera支持,使用document.hasFocus()
方法可能会获得更好的结果。有关详细信息,请参阅here。
答案 5 :(得分:0)
如果用户的浏览器窗口处于焦点/活动状态,但是刚刚单击刷新按钮(或网址栏等),则document.hasFocus()
会告诉您该窗口未处于活动状态。
但是,您可以调用window.focus()
来查看focus
事件是否真正被触发。如果是这样,则浏览器仍处于焦点/活动状态。
const windowHasFocus = function () {
if (document.hasFocus()) return true
let hasFocus = false
window.addEventListener('focus', function () {
hasFocus = true
})
window.focus()
return hasFocus
}