2010-01-11 49 views
5

Hay un menú de árbol en mi aplicación y al hacer clic en los elementos del menú, carga una url en un iFrame. Me gusta establecer el foco en un elemento de la página cargada en el iFrame.Configuración del foco en un iFrame en IE

estoy usando el código, y funciona perfectamente en todos los navegadores excepto IE:

var myIFrame = $("#iframeName"); 
myIFrame.focus(); 
myIFrame.contents().find('#inputName').focus(); 

He intentado todas las opciones diferentes, como el uso de setTimeout, pero ninguna posibilidad.

Después de cargar la página, cuando toco la tecla de tabulación, va a la segunda entrada, lo que significa que ha estado en la primera entrada, ¡pero no muestra el cursor!

Estoy usando ExtJS y el complemento ManagedIFrame.

Cualquier ayuda es apreciada.

+0

es la URL de iFrame de un dominio diferente de la ventana principal? Hay preocupaciones de dominio de seguridad con eso, y IE se comporta de una manera un poco diferente. Además, ¿este código está listo para ejecutarse en el documento listo, o solo en la página? –

+0

Carga la página desde el mismo dominio. Sí, el código está envuelto dentro del documento listo. En realidad funciona en Firefox, Safari y Chrome, no en IE. –

Respuesta

3

¿El iFrame está visible o se muestra más adelante? Los elementos se crean en orden diferente, que es la base del enfoque setTimeout. ¿Intentó un tiempo de espera de alto valor en un tiempo de espera establecido?

Pruebe algo como mínimo medio segundo para poner a prueba ... IE tiende a hacer las cosas en un orden diferente, por lo que un alto tiempo de espera puede ser necesaria para conseguirlo no al fuego hasta que rinde/acabados de pintura:

$(function(){ 
    setTimeout(function() { 
    var myIFrame = $("#iframeName"); 
    myIFrame.focus(); 
    myIFrame.contents().find('#inputName').focus(); 
    }, 500); 
}); 
+0

Bueno, incluso lo intenté con 1000 antes. Una cosa más que puede ayudar, muestra el cursor por un momento, ¡y el cursor se va inmediatamente! Como dije en la pregunta, después de presionar la pestaña, va al siguiente cuadro de entrada. Simplemente no muestra el cursor. Además, el iframe está visible onload, pero establece el src más tarde, cada vez que el usuario hace clic en un elemento del menú. –

+0

¿Se está enfocando cada vez que cambia el iframe src? –

+0

Sí, lo soy. Estableció el foco justo después del evento cargado en el documento cada vez. –

4

Necesita llamar al método focus() del objeto iframe window, no el elemento iframe. No soy experto ni en jQuery ni en ExtJS, por lo que mi ejemplo a continuación no usa ninguno de los dos.

function focusIframe(iframeEl) { 
    if (iframeEl.contentWindow) { 
     iframeEl.contentWindow.focus(); 
    } else if (iframeEl.contentDocument && iframeEl.contentDocument.documentElement) { 
     // For old versions of Safari 
     iframeEl.contentDocument.documentElement.focus(); 
    } 
} 
+3

Lo probé y no funcionó. –

1

difíciles de solucionar sin un ejemplo de trabajo, pero se puede tratar de ocultar y mostrar la entrada, así, a la fuerza de IE para volver a dibujar el elemento.

Algo así como:

var myIFrame = $("#iframeName"); 
myIFrame.focus(); 
myIFrame.contents().find('#inputName').hide(); 
var x = 1; 
myIFrame.contents().find('#inputName').show().focus(); 

Esto podría sacudir IE en mostrar el cursor.

0

que podría conseguir IE para enfocar un campo de entrada en un iframe con:

iframe.focus(); 
var input = iframe... 
input.focus(); 
iframe.contentWindow.document.body.focus(); 
input.focus(); 
Cuestiones relacionadas