2010-01-11 16 views
5

C'è un menu ad albero nella mia applicazione e al clic delle voci di menu, carica un URL in un iFrame. Mi piace impostare lo stato attivo in un elemento della pagina caricato in iFrame.Impostazione Focus su un iFrame in IE

sto usando questo codice, e funziona perfettamente in tutti i browser tranne IE:

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

Ho provato tutte le varie opzioni come l'utilizzo di setTimeout, ma nessuna possibilità.

Dopo il caricamento della pagina, quando si preme il tasto Tab, si passa al secondo input, che significa che è stato sul primo input, ma non mostra il cursore!

Sto usando ExtJS e il plugin ManagedIFrame.

Qualsiasi aiuto è apprezzato.

+0

è l'URL iFrame da un dominio diverso da quello della finestra principale? Esistono problemi relativi al dominio della sicurezza e IE si comporta in modo leggermente diverso. Inoltre, questo codice viene avvolto per essere eseguito su documenti pronti o solo nella pagina? –

+0

Carica la pagina dallo stesso dominio. Sì, il codice è racchiuso all'interno del documento pronto. Funziona in realtà su FireFox, Safari e Chrome, non su IE. –

risposta

3

È il carico visibile di iFrame o mostrato in seguito? Gli elementi sono creati in ordine diverso, che è la base dell'approccio setTimeout. Hai provato un tempo di attesa di alto valore su un timeout impostato?

Provare qualcosa di simile, almeno mezzo secondo per testare ... IE tende a fare le cose in un ordine diverso, quindi un alto timeout può essere necessaria per farlo non sparare fino a quando il rendering/vernici:

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

Beh, l'ho provato anche con 1000 prima. Un'altra cosa che può aiutare, mostra il cursore per un momento, e il cursore si allontana immediatamente! Come ho detto nella domanda, dopo aver colpito la scheda, passa alla casella di immissione successiva. Semplicemente non visualizza il cursore. Inoltre, l'iframe è visibile su onload, ma imposta lo src in un secondo momento, ogni volta che l'utente fa clic su una voce di menu. –

+0

Stai mettendo a fuoco ogni volta che cambia l'iframe src? –

+0

Sì, lo sono. Imposta l'attenzione subito dopo ogni evento caricato da documenti. –

4

È necessario chiamare il metodo focus() dell'oggetto window dell'iframe, non l'elemento iframe. Non sono esperto in jQuery o ExtJS, quindi il mio esempio non usa nessuno dei due.

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

L'ho provato e non ha funzionato. –

1

difficile risolvere senza un esempio di lavoro, ma si potrebbe provare nascondere e mostrare l'ingresso pure, per forzare IE per ridisegnare l'elemento.

Qualcosa di simile:

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

Questo potrebbe scuotere IE nella visualizzazione del cursore.

0

ho potuto ottenere IE per focalizzare un campo di input in un iframe con:

iframe.focus(); 
var input = iframe... 
input.focus(); 
iframe.contentWindow.document.body.focus(); 
input.focus(); 
Problemi correlati