jQuery und iframes
February 11, 2010
Als Beispiel möchte ich hier den bekannten JavaScript WYSIWYG-Editor tinyMCE heranziehen. Dieser Editor fügt nämlich als (vermeintliche) Textarea einen iframe ein. Der folgende Code-Ausschnitt zeigt das DOM desselben.
Nun ist man geneigt zu glauben, man könne die Textarea z.B. einfach wie folgt selektieren:
$('#tinymce')
Das kann aber nicht funktionieren, weil der iframe über seine eigene HTML-Struktur und damit sein eigenes DOM (Document Object Model) verfügt.
Die gute Nachricht ist, dass dieses DOM ansprechbar ist. In purem JavaScript würde man das folgendermaßen machen:
window.frames['Name des iframes'].document.getElementById('anzusprechende id')
Verwendet man das Framework jQuery, sähe der Selektor so aus:
$('#id des iframes').contents().find('#anzusprechende id')
oder in unserem Beispiel mit dem tinyMCE:
$('#content_ifr').contents().find('#tinymce').html();
Dabei ist die Funktion contents() (unter anderem) speziell für das Selektieren von iframes ausgelegt. Weil der Selektor nur einmalig verwendet werden kann, bedienen wir uns eines kleinen Tricks: die Funktion find() selektiert uns schließlich die Id oder Klasse im iframe.
Nun ist man geneigt zu glauben, man könne die Textarea z.B. einfach wie folgt selektieren:
$('#tinymce')
Das kann aber nicht funktionieren, weil der iframe über seine eigene HTML-Struktur und damit sein eigenes DOM (Document Object Model) verfügt.
Die gute Nachricht ist, dass dieses DOM ansprechbar ist. In purem JavaScript würde man das folgendermaßen machen:
window.frames['Name des iframes'].document.getElementById('anzusprechende id')
Verwendet man das Framework jQuery, sähe der Selektor so aus:
$('#id des iframes').contents().find('#anzusprechende id')
oder in unserem Beispiel mit dem tinyMCE:
$('#content_ifr').contents().find('#tinymce').html();
Dabei ist die Funktion contents() (unter anderem) speziell für das Selektieren von iframes ausgelegt. Weil der Selektor nur einmalig verwendet werden kann, bedienen wir uns eines kleinen Tricks: die Funktion find() selektiert uns schließlich die Id oder Klasse im iframe.
Dankeschön für den Artikel! Arbeite mich auch gerade in jQuery rein(obwohl man das eigentlich nicht arbeiten nennen kann, ist ja recht einfach) und bin jetzt auch auf das "Problem" mit dem iFrame gestolpert, weil ich ihn für eine Statusanzeige eines Uploads brauche. Läuft nun alles.
Liebe Grüße!