Come posso catturare la sfocatura e il fuoco dell'intera finestra del browser?

Question

Vorrei catturare la sfocatura e la messa a fuoco della finestra del browser effettiva, il che significa che il cambiamento di focus sui frame figlio non è di interesse.

Attualmente sto usando $(top).focus() $(top).blur()

e $(window).focus() $(window).blur()

Tuttavia, questi fuoco quando l'utente passa a concentrarsi iframe incorporati, che non voglio.

Qualcuno sa di un modo per acquisire l'attivazione e la disattivazione VERO della finestra?

[EDIT]

Blur e mettere a fuoco gli eventi del fuoco quando un utente si sposta da una pagina web, alla pagina web di un iframe incorporato. Questo è diverso dagli eventi di "attivazione finestra", che si attivano solo quando la FINESTRA BROWSER (o scheda) effettiva viene portata in primo piano o inviata (cioè, cambiata o ridotta a icona).

Non mi interessa la sfocatura, perché il fatto che l'utente abbia navigato su una cornice incorporata non ha alcuna conseguenza per il programma. Tuttavia, se l'utente riduce la finestra, cambia le schede o passa a un altro programma, voglio sapere a riguardo ...

Answer 1

Se non ti interessa catturare gli eventi del mouse all'interno degli iframe, puoi aggiungere questo css agli elementi iframe:

pointer-events:none; 

Ciò indica gli eventi del mouse passare "attraverso" l'elemento e il bersaglio ciò che è "sotto" quell'elemento invece.

Nota tuttavia che questa compatibilità di funzionalità tra i browser potrebbe essere limitata e anche quelle che la implementano potrebbero farlo in modo diverso. Questa dichiarazione è posticipata alla bozza CSS4 a causa della quantità di problemi che ha avuto nelle varie implementazioni dei browser (secondo MDN - leggi di più qui: https://developer.mozilla.org/en/CSS/pointer-events)

Answer 2

non hai bisogno di jquery.
window.onblur e window.onfocus possibile risolvere il problema :)

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

La proprietà onblur può essere utilizzato per impostare il gestore sfocatura sulla finestra, che si attiva quando la finestra perde lo stato attivo.

Answer 3

Penso che si possa usare qualcosa come il seguente per disabilitare quel comportamento.

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

Answer 4

È possibile utilizzare qualcosa come questo per rilevare gli eventi del browser.

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

Fonte Post

Answer 5

ho questo

$(function() { 

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

}) 

lavorando bene su IE, Firefox e Chrome, in cui il banner animato solo quando play_banner è impostato su true, in modo da smettere di lavorare quando il l'utente cambia la pagina, e quando è tornato continua da dove era ...

Answer 6

Ho appena risolto questo problema per la situazione che avevo. Avevo bisogno di contare quanto tempo l'utente stava spendendo in ogni pagina.

L'implementazione precedente era qualcosa di simile:

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) 

Poi ho avuto lo stesso problema si ha: ogni volta che l'utente ha immesso un iframe, si è fermato il tempo a contare. Quello che ho fatto è stato ascoltare la messa a fuoco e gli eventi di sfocatura dei bambini iframe corpi, in questo modo:

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(); 

Con questa impostazione, quando l'utente inserisce l'iframe, il browser chiamerà _blur() e poi _focus() quindi il timer non si ferma.

Questo potrebbe non essere esattamente ciò che si desidera, ma a seconda del problema potrebbe essere una soluzione accettabile. Funziona per il mio caso d'uso :-)