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

Question

我想捕捉实际浏览器窗口的模糊和焦点 - 这意味着对子框架的焦点更改不感兴趣。

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

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

但是，当用户将焦点更改为嵌入的 iframe 时，它​​们会触发，这是我不想要的。

有谁知道捕捉窗口的真正激活和停用的方法吗？

[编辑]

当用户从网页移动到嵌入式 iframe 的网页时，会触发模糊和焦点事件。 这与“窗口激活”事件不同，后者仅在实际的 BROWSER WINDOW（或选项卡）被带到前面或发送出去（即选项卡更改或最小化）时触发。

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

Answer 1

你不需要 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 2

我有这个

$(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 3

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

pointer-events:none;

这会指示鼠标事件“穿过”元素并以该元素“下方”的任何内容为目标。

但是请注意，浏览器之间的此功能兼容性可能会受到限制，即使是那些实现它的人也可能会以不同的方式做到这一点。 由于在各种浏览器实现中存在大量问题，该声明被推迟到 CSS4 草案中（根据 MDN - 在此处阅读更多信息：https://developer.mozilla.org/en/CSS/pointer-events）

Answer 4

我认为您可以使用以下内容来禁用该行为。

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

Answer 5

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

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 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()，因此计时器不会停止。

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