关于javascript：如何捕获整个浏览器窗口的模糊和焦点？


How can I capture the blur and focus of the entire browser window?

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

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

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

但是，当用户将焦点更改为嵌入式iframe时，这些操作就会触发，我不希望这样做。

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

[编辑]

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

我对模糊不感兴趣，因为用户导航到嵌入式框架这一事实与程序无关。 但是，如果用户最小化窗口，更改选项卡或切换到其他程序，我想了解一下...

相关讨论

我有这个

1
2
3
4
5
6
7
$(function() {

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

 })

在IE，firefox和chrome上可以正常工作，其中横幅仅在play_banner设置为true时才能设置动画，因此当用户更改页面时，该横幅停止工作；当他返回页面时，它将从原处继续运行...

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
(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属性可用于在窗口上设置模糊处理程序，该模糊处理程序在窗口失去焦点时触发。

相关讨论

我只是针对我的情况解决了这个问题。
我需要计算用户在每个页面上花费了多少时间。

以前的实现是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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子实体的聚焦和模糊事件，如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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()，以便计时器不会停止。

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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;
}

源帖子

我认为您可以使用类似以下内容的功能来禁用该行为。

1
2
3
4
5
$('iframe').focusin(function(event)
{
    event.preventDefault();
    return false;
});
相关讨论

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

1
pointer-events:none;

这指示鼠标事件"遍历"元素并以该元素"之下"的对象为目标。

但是请注意，此功能在浏览器之间的兼容性可能会受到限制，即使实施该功能的人也可能会有所不同。
由于它在各种浏览器实现中存在的问题数量，该声明被推迟到CSS4草案中(根据MDN-在此处了解更多信息：https：//developer.mozilla.org/en/CSS/pointer-events)

相关讨论