Impostazione della messa a fuoco per iframe contenuto

Question

Ho una pagina con un document.onkeydown gestore di eventi, e sto caricando all'interno di un iframe in un'altra pagina.Devo fare clic all'interno dell'iframe per ottenere il contenuto della pagina per avviare "in ascolto".

C'è qualche modo posso usare JavaScript in una pagina esterna per impostare la messa a fuoco all'interno della pagina in modo da non devo fare clic all'interno dell'iframe?

EDIT:risposta al commento:

Il contesto è la finestra principale è un light-box sistema simile, tranne che invece di immagini, mostra iframe, e ogni iframe è una pagina interattiva con keydown/mousemove gestori.questi gestori non sparare fino a quando clicco nell'iframe dopo aver mostrato il light-box-cosa.

In realtà non sto cercando di "setFocus" nel senso tradizionale del termine, quanto di "attivare gestori di eventi su iframe contentDocument"

Answer 1

Ho avuto un problema simile con jQuery Javascript (un lightbox in stile widget finestra di dialogo).Il modo in cui ho risolto il mio problema è il seguente:

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;
   });
});

Il codice non sembra funzionare senza il setTimeout().Sulla base della mia prova, funziona in Firefox3.5, Safari4, Chrome4, IE7 e IE6.

Answer 2

Utilizzando il contentWindow.focus() il metodo, il timeout è probabilmente necessario attendere l'iframe per essere caricato completamente.

Per me, anche con l'attributo onload="this.contentWindow.focus()" funziona, con firefox, nel tag iframe

Answer 3

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

Answer 4

Provate ad ascoltare per eventi nel documento principale e passando il caso di un gestore nell'iframe documento.

Answer 5

ho avuto un problema simile in cui stavo cercando di concentrarsi su un txt area in un iframe caricato da un'altra pagina.nella maggior parte dei casi funziona.C'era un problema dove sarebbe il fuoco in FF quando l'iFrame è stato caricato, ma prima non era visibile.così la messa a fuoco non è mai sembrato essere impostato correttamente.

ho lavorato intorno a questo con un simular soluzione per cheeming la risposta di sopra

    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 6

Ho scoperto che FF attiva il focus dell'evento per iframe.contentWindow ma non per iframe.contentWindow.documento.Chrome per esempio in grado di gestire entrambi i casi.così, ho solo bisogno di legare la mia gestori di eventi di iframe.contentWindow per ottenere le cose di lavoro.Forse questo aiuta qualcuno ...

Answer 7

Ecco il codice per creare un iframe utilizzo di jQuery, aggiungere al documento, il polling finché non viene caricato, quindi mettere a fuoco.Questo è meglio di impostazione arbitraria di un timeout che può o non può funzionare a seconda di quanto tempo il iframe prende a carico.

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);

Il codice per rilevare quando un iframe è caricato è stato adattato da Biranchi's risposta a Come verificare se l'iframe viene caricato o ha un contenuto?

Answer 8

Questo è qualcosa che ha funzionato per me, anche se puzza un po ' sbagliato:

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.inoltre, scorre verso il basso dei contenuti.Credo che dovrebbe essere l'inserimento di manichino casella di testo in alto.