Establecer foco en contenido de iframe

Question

Tengo una página con un controlador de eventos document.onkeydown, y la estoy cargando dentro de un iframe en otra página. Tengo que hacer clic dentro del iframe para que la página de contenido comience a "escuchar".

¿Hay alguna manera de que pueda usar JavaScript en la página externa para establecer el foco en la página interna, así que no tengo que hacer clic dentro del iframe?

EDIT: respuesta al comentario:

El contexto es la ventana principal es un sistema de luz en forma de caja, excepto que en lugar de las imágenes, se muestra iframes, y cada marco flotante es una página interactiva con keydown manipuladores/mousemove . estos manejadores no disparan hasta que hago clic en el iframe después de mostrar la caja de luz.

No estoy realmente en busca de "setFocus" en el sentido tradicional tanto como "permitir que los controladores de eventos en el marco flotante contentDocument"

Answer 1

Tuve un problema similar con el jQuery Thickbox (un widget de diálogo de estilo de caja de luz). La forma en que fijo mi problema es el siguiente:

function setFocusThickboxIframe() { 
    var iframe = $("#TB_iframeContent")[0]; 
    iframe.contentWindow.focus(); 
} 

$(document).ready(function(){ 
    $("#id_cmd_open").click(function(){ 
     /* 
     run thickbox code here to open lightbox, 
     like tb_show("google this!", "http://www.google.com"); 
     */ 
     setTimeout(setFocusThickboxIframe, 100); 
     return false; 
    }); 
}); 

El código no parece funcionar sin el setTimeout(). Según mis pruebas, funciona en Firefox3.5, Safari4, Chrome4, IE7 e IE6.

Answer 2

document.getElementsByName("iframe_name")[0].contentWindow.document.body.focus(); 

Answer 3

Trate de escuchar para los eventos en el documento principal y pasar el caso a un manejador en el documento iframe.

Answer 4

Esto es algo que funcionó para mí, a pesar de que huele un poco mal:

var iframe = ... 
var doc = iframe.contentDocument; 

var i = doc.createElement('input'); 
i.style.display = 'none'; 
doc.body.appendChild(i); 
i.focus(); 
doc.body.removeChild(i); 

hmmm. también se desplaza al final del contenido. Supongo que debería insertar el cuadro de texto ficticio en la parte superior.

Answer 5

Usando el método contentWindow.focus(), probablemente sea necesario esperar para que el iframe se cargue por completo.

Para mí, utilizando también el atributo onload="this.contentWindow.focus()" obras, con Firefox, en la etiqueta de marco flotante

Answer 6

descubrí que FF activa el evento foco para iframe.contentWindow pero no para iframe.contentWindow.document. Chrome, por ejemplo, puede manejar ambos casos. entonces, solo necesitaba vincular mis manejadores de eventos a iframe.contentWindow para que las cosas funcionen. Quizás esto ayude a alguien ...

Answer 7

tuve un problema similar cuando estaba tratando de centrarme en un área de texto en un iframe cargado desde otra página. en la mayoría de los casos, funciona Hubo un problema por el cual se activaría en FF cuando se cargó el iFrame pero antes de que fuera visible. por lo que el foco nunca pareció estar configurado correctamente.

trabajé alrededor de este con una solución para simular la respuesta de Cheeming anterior

var iframeID = document.getElementById("modalIFrame"); 
//focus the IFRAME element 
$(iframeID).focus(); 
//use JQuery to find the control in the IFRAME and set focus 
$(iframeID).contents().find("#emailTxt").focus(); 

Answer 8

Aquí está el código para crear un iframe usando jQuery, lo añadirá al documento, sondear hasta que se carga, a continuación, centrarse ella. Esto es mejor que establecer un tiempo de espera arbitrario que puede funcionar o no dependiendo de cuánto tiempo tarde en cargarse el iframe.

var jqueryIframe = $('<iframe>', { 
    src: "http://example.com" 
}), 
focusWhenReady = function(){ 
    var iframe = jqueryIframe[0], 
    doc = iframe.contentDocument || iframe.contentWindow.document; 
    if (doc.readyState == "complete") { 
     iframe.contentWindow.focus(); 
    } else { 
     setTimeout(focusWhenReady, 100) 
    } 
} 
$(document).append(jqueryIframe); 
setTimeout(focusWhenReady, 10); 

El código para detectar cuando se carga el iframe fue adaptado de Biranchi 's respuesta a How to check if iframe is loaded or it has a content?