2010-01-11 7 views
5

Es gibt ein Baummenü in meiner Anwendung und beim Klicken auf die Menüeinträge wird eine URL in einen iFrame geladen. Ich möchte den Fokus auf ein Element der Seite setzen, die in den iFrame geladen wird.Einstellen des Fokus auf einen iFrame in IE

ich diesen Code bin mit und es funktioniert perfekt in allen Browsern außer IE:

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

Ich habe versucht, alle Optionen wie setTimeout verwenden, aber keine Chance.

Nach dem Laden der Seite, wenn ich die Tabulatortaste gedrückt habe, geht es zum zweiten Eingang, was bedeutet, dass es auf dem ersten Eingang war, aber es zeigt nicht den Cursor!

Ich verwende ExtJS und das ManagedIFrame-Plugin.

Jede Hilfe wird geschätzt.

+0

Ist die iFrame-URL von einer anderen Domäne als das Hauptfenster? Es gibt Bedenken hinsichtlich der Sicherheitsdomäne, und IE verhält sich etwas anders. Wird dieser Code auch so umschlossen, dass er auf Dokument bereit oder nur auf der Seite ausgeführt wird? –

+0

Es lädt die Seite aus der gleichen Domäne. Ja, der Code ist innerhalb des Dokumentes bereit. Es funktioniert tatsächlich auf FireFox, Safari und Chrome, nicht auf IE. –

Antwort

3

Ist der iFrame sichtbar onload oder wird er später angezeigt? Die Elemente werden in unterschiedlicher Reihenfolge erstellt, was die Basis des setTimeout-Ansatzes ist. Haben Sie eine Wartezeit bei einem festgelegten Timeout versucht?

Probieren Sie etwas wie mindestens eine halbe Sekunde zu testen ... IE neigt Dinge in einer anderen Reihenfolge zu tun, so dass eine hohe Timeout erforderlich sein kann, um es nicht zu feuern, bis machen/Lackierungen:

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

Nun, ich habe es sogar mit 1000 probiert. Eine weitere Sache, die helfen kann, zeigt den Cursor für einen Moment, und der Cursor verschwindet sofort! Wie ich in der Frage gesagt habe, nachdem ich die Registerkarte gedrückt habe, geht es zum nächsten Eingabefeld. Es zeigt nur den Cursor nicht an. Außerdem ist der Iframe sichtbar onload, setzt den src jedoch später, wenn der Benutzer auf einen Menüeintrag klickt. –

+0

Konzentrieren Sie sich jedes Mal, wenn sich der Iframe-Quellcode ändert? –

+0

Ja, bin ich. Es stellt den Fokus direkt nach dem dokumentengeladenen Ereignis jedes Mal ein. –

4

Sie müssen die -Methode des iframe-Objekts window aufrufen, nicht das iframe-Element. Ich bin kein Experte in jQuery oder ExtJS, so dass mein Beispiel unten weder verwendet noch.

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

Ich habe es versucht und es hat nicht funktioniert. –

1

schwierig, ohne ein funktionierendes Beispiel zu beheben, aber Sie könnten versuchen, die Eingabe als auch versteckt und zeigt, IE zu zwingen, das Element neu zu zeichnen.

Etwas wie:

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

Dies könnte IE Ruck in den Cursor angezeigt wird.

0

Ich kann IE mit einem Eingabefeld in einem Iframe zu konzentrieren:

iframe.focus(); 
var input = iframe... 
input.focus(); 
iframe.contentWindow.document.body.focus(); 
input.focus(); 
Verwandte Themen