javascript - ejemplo - iframe video

Establecer el foco en los contenidos del iframe

Question

Tengo una página con un controlador de eventos document.onkeydown , y lo 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í no tengo que hacer clic dentro del iframe?

EDITAR: respuesta al comentario:

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

Realmente no estoy buscando "setFocus" en el sentido tradicional tanto como "enable event handlers en el iframe contentDocument"

Answer 1

Aquí hay un código para crear un iframe usando jQuery, anexarlo al documento, sondearlo hasta que se cargue, luego enfocarlo. 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 cuándo se carga el iframe se adaptó de la Biranchi de Biranchi a ¿Cómo comprobar si el marco está cargado o si tiene un contenido?

Answer 2

Descubrí que FF desencadena el evento de 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. Tal vez esto ayude a alguien ...

Answer 3

Esto es algo que funcionó para mí, aunque 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 4

Intente escuchar eventos en el documento principal y pasar el evento a un controlador en el documento de iframe.

Answer 5

Tuve un problema similar con jQuery Thickbox (un widget de diálogo de estilo de caja de luz). La forma en que arreglé mi problema es la 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 6

Tuve un problema similar cuando intentaba enfocar 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 esto con una solución similar a 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 7

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

Para mí, también usando attribute onload="this.contentWindow.focus()" funciona, con firefox, en la etiqueta iframe

Answer 8

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