jQuery und iframes

Von in javascript, jquery, netzthetik

Ich fand mich kürz­lich in der ver­zwick­ten Lage, die Text­area in einem inli­ne frame selek­tie­ren zu müs­sen. Es galt über Java­Script dem bereits vor­han­de­nen Text defi­nier­te Zei­chen anzu­hän­gen. Was auf den ers­ten Blick als eher tri­vi­al anmu­tet berei­te­te mir dann doch etwas mehr Kopf­zer­bre­chen. Dabei ist es wirk­lich ein­fach. Wenn man weiß, wie es geht.
(for English ver­si­on of this arti­cle: “How­to: selec­ting an iframe with jque­ry”)

Als Bei­spiel möch­te ich hier den bekann­ten Java­Script WYSIWYG-​Editor tinyMCE her­an­zie­hen. Die­ser Edi­tor fügt näm­lich als (ver­meint­li­che) Text­area einen iframe ein. Der fol­gen­de Code-​Ausschnitt zeigt das DOM des­sel­ben.

<iframe id="content_ifr" frameborder="0" [...]>
    <html>
        <head xmlns="http://www.w3.org/1999/xhtml">
        [...]
        <body id="tinymce" class="mceContentBody" [...]>
        <p>[...]</p>
        [...]

Nun ist man geneigt zu glau­ben, man kön­ne die Text­area (bzw. den body) z.B. ein­fach wie folgt selek­tie­ren:

$('#tinymce');

Das kann aber nicht funk­tio­nie­ren, weil der iframe über sei­ne eige­ne HTML-​Struktur und damit sein eige­nes DOM (Docu­ment Object Model) ver­fügt.

Die gute Nach­richt ist, dass die­ses DOM ansprech­bar ist. In purem Java­Script wür­de man das fol­gen­der­ma­ßen machen:

window.frames['Name_des_iframes']
    .document.getElementById('anzusprechende_id');

Ver­wen­det man das Frame­work jQue­ry, sähe der Selek­tor so aus:

$('#id_des_iframes').contents().find('#anzusprechende_id');

oder in unse­rem Bei­spiel mit dem tinyMCE:

$('#content_ifr').contents().find('#tinymce').html();

Dabei ist die Funk­ti­on con­tents() (unter ande­rem) spe­zi­ell für das Selek­tie­ren von iframes aus­ge­legt. Weil der Selek­tor nur ein­ma­lig in der Ver­ket­tung ver­wen­det wer­den kann, bedie­nen wir uns eines klei­nen Tricks: die Funk­ti­on find() selek­tiert uns schließ­lich die Id oder Klas­se im iframe.

Share on Google+Share on RedditTweet about this on TwitterShare on LinkedInShare on FacebookShare on XingEmail this to someone