Einstellung Fokus auf iframe Inhalte

Question

Ich habe eine Seite mit einem document.onkeydown Event-Handler, und ich bin es in einem Iframe in einer anderen Seite zu laden. Ich habe in dem iframe klicken, um die Content-Seite zu starten, um „hören“.

Gibt es irgendeine Weise, die ich JavaScript in der äußeren Seite verwenden können, um den Fokus auf die innere Seite zu setzen, so muss ich innerhalb des iframe klicken Sie nicht auf?

EDIT: Antwort auf Kommentar:

Der Kontext ist das Hauptfenster wird ein Licht-box-artiges System, außer anstelle von Bildern, es zeigt, iframes und jede iframe ist eine interaktive Seite mit keydown / mousemove- Handler. diese Handler erst ausgelöst, wenn ich in der iframe klicken, nachdem die Licht-Box-Sache zeigte.

Ich bin nicht wirklich die Suche im traditionellen Sinne zu „setFocus“ so viel wie

„Event-Handler auf dem iframe contentdocument enable“

Answer 1

Ich hatte ein ähnliches Problem mit dem jQuery Thickbox (Leuchtkasten-Stil Dialog-Widget). Die Art, wie ich mein Problem behoben ist wie folgt:

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

Der Code scheint nicht ohne die setTimeout zu arbeiten (). Auf der Grundlage meiner Prüfung, es funktioniert in Firefox3.5, Safari4, Chrome4, IE7 und IE6.

Answer 2

die contentWindow.focus () -Methode verwendet, wird das Timeout wahrscheinlich notwendig zu warten, für die iframe vollständig geladen sein.

Für mich auch Attribut onload="this.contentWindow.focus()" Werke verwenden, mit firefox, in den iframe-Tag

Answer 3

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

Answer 4

Versuchen Sie, für Ereignisse im übergeordneten Dokument zu hören und um das Ereignis zu einem Handler in dem iframe Dokument übergeben.

Answer 5

Ich hatte ein ähnliches Problem, wo ich auf einem txt-Bereich in einem Iframe von einer anderen Seite geladen zu konzentrieren versuche. in den meisten Fällen funktionieren. Es gab ein Problem, wo es in FF feuern würde, wenn das iFrame geladen wurde, aber bevor es sichtbar war. so dass der Fokus schien nie richtig eingestellt werden.

ich arbeitete, um diesen mit einer simular Lösung cheeming Antwort oben

    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

entdeckte ich, dass FF den Fokus Ereignis für iframe.contentWindow löst aber nicht für iframe.contentWindow.document. Chrome zum Beispiel können beide Fälle behandeln. so, ich musste nur meine Event-Handler iframe.contentWindow um binden, um Dinge zu arbeiten. Vielleicht hilft das jemand ...

Answer 7

Hier ist der Code ein iframe mit jQuery zu erstellen, fügen Sie es zu dem Dokument, abzufragen, bis es geladen wird, dann aktiviert es. Das ist besser als eine beliebige Timeout einstellen, die in Abhängigkeit davon, können oder auch nicht, wie lange der Iframe lädt.

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

Der Code zum Erfassen, wenn der iframe geladen wurde von Biranchi 's Antwort angepasst Wie zu überprüfen, ob iframe geladen ist oder hat sie einen Gehalt

Answer 8

Das ist etwas, das für mich gearbeitet, obwohl es ein bisschen falsch riecht:

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. es rollt auch auf den Grund des Inhalts. Ich glaube, ich sollte die Dummy-Textbox an der Spitze werden eingefügt.