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

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

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