Detectando cuando un iframe obtiene o pierde el foco

Question

¿Cuál es la forma correcta de detectar cuándo un iframe obtiene o pierde el foco (es decir, recibirá o no eventos de teclado)? Lo que sigue no está funcionando en Fx4:

var iframe = /* my iframe */; 
iframe.addEventListener("focus", function() { /* never gets called */ }, false); 

Answer 1

Resulta que no es realmente posible. Tuve que cambiar la lógica de mi página para evitar la necesidad de rastrear si el iframe tiene foco.

Answer 2

La solución es inyectar un evento javascript en la página principal de esta manera:

var script = document.createElement('script'); 
script.type = 'text/javascript'; 

script.innerHTML = 
"document.addEventListener('click', function()" + 
"{ if(document.getElementById('iframe')) {" + 
    // What you want 
"}});"; 

head.appendChild(script); 

Answer 3

Puede sondear "document.activeElement" para determinar si coincide con el iframe. El sondeo no es ideal, pero funciona:

function checkFocus() { 
    if(document.activeElement == document.getElementsByTagName("iframe")[0]) { 
    console.log('iframe has focus'); 
    } else { 
    console.log('iframe not focused'); 
    } 
} 

window.setInterval(checkFocus, 1000); 

Answer 4

Sé que es viejo, pero también tuve el mismo problema.

Terminé usando este pequeño pice de código:

$(document).on('focusout', function(){ 
     setTimeout(function(){ 
     // using the 'setTimout' to let the event pass the run loop 
     if (document.activeElement instanceof HTMLIFrameElement) { 
      // Do your logic here.. 
     } 
    },0); 
}); 

Answer 5

Aquí está el código para detectar cuándo un iframe obtiene o pierde el foco

// This code can be used to verify Iframe gets focus/loses. 

     function CheckFocus(){ 

     if (document.activeElement.id == $(':focus').context.activeElement.id) { 
       // here do something 
      } 
    else{ 
     //do something 
    } 
} 

Answer 6

Esto podría funcionar

document.addEventListener('click', function(event) { 
    var frame= document.getElementById("yourFrameID"); 

    var isClickInsideFrame = frame.contains(event.target); 

    if (!isClickInsideFrame) { 
    //exec code 
    } 

});