Come accedere ad elementi in un iframe con jQuery

Per accedere ad elementi interni di un iframecon jquery è semplicissimo.
Supponiamo di avere un iframe di id=”iframe”

<iframe id="iframe" ...></iframe>

E che l’iframe contenga un div di id=”div”

<div id="div">Prova</div>

Per accedere all’elemento basta selezionare l’iframe, prenderne il contenuto e cercare l’elemento voluto:

var $div = $('#iframe').contents().find('#div'));

Con questo esempio potete accedere a qualsiasi elemento dell’iframe semplicemente sostituendo #div con i selettori che vorrete 🙂

Unisciti alla discussione

9 commenti

  1. ciao, volevo sapere per cosa intendi selezionare l’iframe prima… questa guida mi sembra interessante al mio problema, ma non riesco a capire bene come applicarla.
    Ti spiego io voglio linkare una pagina esterna non mia sul mio blog ma vorrei far visualizzare solamente un specifico div (visto dal sorgente della pagina) e non tutta la pagina web. Esempio se non sono stato chiaro: Se in un sito è presente un blocco div chiamato MAP voglio far visualizzare nel mio blog solo ed esclusivamente quel blocco…
    Stavo pensando di far visualizzare l’intera pagina e di nascondere tutto il resto ma non so come fare o potrebbe essere molto macchinoso… spero di essere stato chiaro e grazie in anticipo per la disponibilità.

  2. Mmh… Devi farlo proprio con jquery? 🙂
    In teoria basta fare:

    $div = $('#iframe').contents().find('#div')).clone();
    $('#iframe').contents().replaceWith($div);
    

    Se non dovesse funzionare prova con

    $div = $('#iframe').contents().find('#div')).clone();
    $('#iframe').contents().find('*).replaceWith($div);
    

  3. Iintanto grazie per la risposta… per quanto riguarda la soluzione, non è necessario che io usa per forza jQuery, però pensavo fosse l’unico modo poiché sono alle prime armi con il web.
    Scusami l’ignoranza poi… ma non ho capito dove mettere l’url del sito dove è presente il div che a me interessa… o se non ti chiedo tanto se è possibile darmi tutto il codice scritto così io possa provare senza errori… intanto provo a vedere un po io cosa riesco a fare… anche perché non sono riuscito a trovare nessuna soluzione che fa al mio caso in rete. Grazie mille ancora 😉

  4. Mmh, appena provato ma nada….
    Questo è il codice che ho scritto:

    $div = $(‘#iframe’).contents().find(‘#footer’)).clone();
    $(‘#iframe’).contents().find(‘*).replaceWith($div);

    Ma nada.. non mi visualizza nulla 😐

  5. ehm, non fa vedere l’altra parte del codice…
    provo ad aggiungere \ per farti visualizzare:

    \
    \

    \
    $div = $(‘#iframe’).contents().find(‘#footer’)).clone();
    $(‘#iframe’).contents().find(‘*).replaceWith($div);

    \

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *