使用 iframe 识别窗口焦点/模糊事件

Question

我正在尝试可靠地识别浏览器窗口/选项卡何时被激活和停用。通常，window 的 focus 和 blur 事件可以，但文档包含多个 iframe。
当 iframe 获得焦点时，主窗口会失去焦点，反之亦然，因此我们有以下焦点事件的可能性 [(none) 表示窗口/选项卡已停用]：

current focus       new focus               events
----------------------------------------------------------------------
window              (none)                  window:blur
window              iframe                  window:blur + iframe:focus
iframe              (none)                  iframe:blur
iframe              window                  iframe:blur + window:focus
iframe              another iframe          iframe:blur + iframe:focus
(none)              window                  window:focus
(none)              iframe                  iframe:focus

注册所有这些事件是没有问题的，如this fiddle所示。但每当我们从主窗口切换到 iframe 或反之亦然，或在两个 iframe 之间切换时，blur 和 focus 事件都会触发；他们会稍微延迟开火。

我担心这里的并发性，因为 blur 处理程序可以开始做一些事情，但它不应该开始，因为用户实际上只是在帧之间的某处切换了焦点。
示例：当页面当前不活动时，它应该定期执行一些 AJAX 请求。也就是说，它应该在用户停用选项卡时开始请求，并在再次激活时停止请求。因此，我们将一个函数绑定到启动请求的blur 事件。如果用户只是点击另一个 iframe，blur，然后不久，focus 就会被触发。但是blur 处理程序已经被触发，在它可以再次停止之前至少发出一个请求。

这就是我的问题：我怎样才能可靠地检测到用户何时实际（取消）激活包含 iframe 的浏览器窗口，而不会有因两个即时 @ 引起的误报风险987654337@ 和 focus 事件？

我写了一个半生不熟的解决方案，它在blur 事件之后使用超时来确定它之后是否有立即的focus 事件 (fiddle)：

var active = false,
    timeout = 50, // ms
    lastBlur = 0,
    lastFocus = 0;

function handleBlur() {
    if (lastBlur - lastFocus > timeout) {
        active = false;
    }
}
function handleFocus() {
    if (lastFocus - lastBlur > timeout) {
        active = true;
    }
}

$(window).on('focus', function () {
    lastFocus = Date.now();
    handleFocus();
}).on('blur', function () {
    lastBlur = Date.now();
    window.setTimeout(handleBlur, timeout);
});

$('iframe').each(function () {
    $(this.contentWindow).on('focus', function () {
        lastFocus = Date.now();
        handleFocus();
    }).on('blur', function () {
        lastBlur = Date.now();
        window.setTimeout(handleBlur, timeout);
    });
});

但我相信这可能会带来很大的问题，尤其是在速度较慢的机器上。增加超时对我来说也是不可接受的，50 毫秒真的是我的痛苦阈值。

有没有办法不依赖客户端足够快？

Answer 1

我试图在没有轮询的情况下执行此操作，但 iframe 不会触发 onblur 事件（如果 iframe 处于焦点时浏览器窗口被停用，我不会触发任何事件），所以我最终需要轮询反正一半，但也许有人可以用这段代码弄清楚一些事情

function onFocus(){ console.log('browser window activated'); }
function onBlur(){ console.log('browser window deactivated'); }


var inter;
var iframeFocused;
window.focus();      // I needed this for events to fire afterwards initially  
addEventListener('focus', function(e){
    console.log('global window focused');
    if(iframeFocused){
        console.log('iframe lost focus');
        iframeFocused = false;
        clearInterval(inter);
    }
    else onFocus();
});

addEventListener('blur', function(e){
    console.log('global window lost focus');
    if(document.hasFocus()){
        console.log('iframe focused');
        iframeFocused = true;
        inter = setInterval(()=>{
            if(!document.hasFocus()){
                console.log('iframe lost focus');
                iframeFocused = false;
                onBlur();
                clearInterval(inter);
            }
        },100);
    }
    else onBlur();
});

Answer 2

您可以轮询 document.hasFocus() 值，如果 iframe 或主窗口被聚焦，则该值应为 true

setInterval(function checkFocus(){
    if( checkFocus.prev == document.hasFocus() ) return;  
    if(document.hasFocus()) onFocus();
    else onBlur();                    
    checkFocus.prev = document.hasFocus();  
},100);

function onFocus(){ console.log('browser window activated') }
function onBlur(){ console.log('browser window deactivated') }