如何捕捉整个浏览器窗口的模糊和焦点？

Question

我想捕捉实际浏览器窗口的模糊和焦点 - 这意味着将焦点更改为子框架并不重要。

目前我一直在使用 $(top).focus() $(top).blur()

和 $(window).focus() $(window).blur()

然而，这些火当用户将焦点更改到嵌入式I帧，这是我不想要的。

有谁知道一种方法来捕获TRUE激活和停用窗口？

[编辑]

模糊和焦点事件火灾时从一个网页用户移动，到嵌入iframe的网页。 这与“窗口激活”事件不同，当实际的BROWSER WINDOW（或制表符）被带到前面或被送走（即，标签已更改或最小化）时才会触发事件。

我对模糊不感兴趣，因为用户导航到嵌入帧的事实对程序没有任何影响。但是，如果用户最小化窗口，更改选项卡或切换到另一个程序，我想知道它...

Answer 1

如果您不关心在iframe内捕获鼠标事件，可以添加此css到iframe元素：

pointer-events:none; 

这将指示鼠标事件“穿过”元素，并指向该元素的任何“下方”。

但请注意，浏览器之间的此功能兼容性可能会受到限制，甚至执行此功能的用户也可能会这样做。 这个声明被推迟到CSS4的草案，因为它有不同的浏览器实现的问题量（根据MDN - 在这里阅读更多：https://developer.mozilla.org/en/CSS/pointer-events）

Answer 2

你不需要jquery。
window.onblur和window.onfocus可以解决你的问题:)

(function(){ 
    var timer = null; 
    var has_switched = false; 

    window.onblur = function(){ 
     timer = settimeout(changeitup, 2000); 
    } 

    window.onfocus = function(){ 
     if(timer) cleartimeout(timer); 
    } 

    function changeitup(){ 
     if(has_switched == false){ 
      alert('the tab lost focus') 
      has_switched = true;  
     } 
    } 
})(); 

的onblur属性可以用来设置窗口，当窗口失去焦点被触发执行模糊处理。

Answer 3

我想你可以使用类似下面的东西来禁用该行为。

$('iframe').focusin(function(event) 
{ 
    event.preventDefault(); 
    return false; 
}); 

Answer 4

您可以使用类似的东西来检测浏览器事件。

function onBlur() { 
    document.body.className = 'blurred'; 
}; 
function onFocus(){ 
    document.body.className = 'focused'; 
}; 

if (/*@cc_on!@*/false) { // check for Internet Explorer 
    document.onfocusin = onFocus; 
    document.onfocusout = onBlur; 
} else { 
    window.onfocus = onFocus; 
    window.onblur = onBlur; 
} 

来源Post

Answer 5

我有这个

$(function() { 

    $(window) 
     .focus(function() { document.getElementById('play_banner').value = true; }) 
     .blur(function() { document.getElementById('play_banner').value = false; }) 

}) 

在IE，Firefox和Chrome，其中当play_banner设置为true的旗帜唯一动画做工精细，所以停止时工作用户改变页面，当他回来时，它继续从那里...

Answer 6

我刚刚解决了这个问题，我的情况。 我需要计算用户在每个页面上花费的时间。

以前的实现是这样的：

var isfocused = true 
var time_on_page = 0; 

function increment_time(){ 
    if(isfocused = true){ 
     time_on_page++; 
    } 
} 

settimeout(increment_time, 1000); 

function _blur(){ 
    isfocused = false 
} 

function _focus(){ 
    isfocused = true 
} 

$(window).blur(_blur) 
$(window).focus(_focus) 

然后，我有你有同样的问题：当用户输入一个iframe，它停止计时。 我所做的就是听注重和孩子的模糊事件的iframe的身体，就像这样：

var isfocused = true 
var time_on_page = 0; 

function increment_time(){ 
    if(isfocused = true){ 
     time_on_page++; 
    } 
    instrument_iframes(); //because iframes might be added later to the dom with javascript 
} 

settimeout(increment_time, 1000); 

function _blur(){ 
    isfocused = false; 
} 

function _focus(){ 
    isfocused = true; 
} 

function instrument_iframes(){ 
    var iframes = $('iframe'); 
    for (var i=0; i<iframes.length; i++){ 
     var contents = $(iframes[i]).contents(); 
     if(contents){ 
      var body = contents.find('body') 
      var body0 = body[0] 
      if(!body0.instrumented){ 
       body.blur(this._blur(this)); 
       body.focus(this._focus(this)); 
       body0.instrumented = true; 
      } 
     } 
    } 
} 

$(window).blur(_blur); 
$(window).focus(_focus); 
instrument_iframes(); 

采用这种设置，当用户进入的iframe，浏览器会调用_blur（），然后_focus（）所以计时器不会停止。

这可能不完全是你想要的，但根据问题它可能是一个可接受的解决方案。 它适用于我的用例:-)