如何捕獲整個瀏覽器窗口的模糊和焦點？

Question

我想捕捉實際瀏覽器窗口的模糊和焦點 - 這意味着將焦點更改為子幀不感興趣。

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

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

但是，當用戶將焦點更改為嵌入式iframe時，這些會觸發，這是我不想要的。

有誰知道捕獲TRUE激活和停用窗口的方法？

[編輯]

當用戶從網頁移動到嵌入式iframe的網頁時，模糊和聚焦事件將觸發。 這與“窗口激活”事件不同，“事件激活”事件僅在實際的BROWSER窗口（或選項卡）被帶到前面或被發送（即，更改或最小化）時觸發。

我對模糊不感興趣，因為用戶導航到嵌入式框架的事實對程序沒有影響。 但是，如果用戶最小化窗口，更改選項卡或切換到另一個程序，我想知道它...

Answer 1

我有這個

$(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 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;
}

來源帖子

Answer 5

我剛剛解決了這個問題。 我需要計算用戶在每個頁面上花費的時間。

之前的實現是這樣的：

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（），以便計時器不會停止。

這可能不是您想要的，但根據問題，它可能是一個可接受的解決方案。 它適用於我的用例:-)

Answer 6

如果您不關心在iframe中捕獲鼠標事件，可以將此css添加到iframe元素：

pointer-events:none;

這指示鼠標事件“遍歷”元素並且目標是“該元素”下面的任何內容。

但請注意，瀏覽器之間的這種功能兼容性可能會受到限制，即使是那些實現它的人也可能會有所不同。 這個聲明被推遲到CSS4草案，因為它在各種瀏覽器實現中存在大量問題（根據MDN - 在這里閱讀更多內容： https ： //developer.mozilla.org/en/CSS/pointer-events ）