chalda.it
7Ott/09Off

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 🙂

Be Sociable, Share!
Commenti (9) Trackback (0)
  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. Eheh… Allora… l’url del sito devi metterlo nell campo src dell’iframe:
    In alternatva di consiglio di utilizzare un linguaggio di programmazione come PHP: così puoi estrapolare solo le parti di html di cui hai bisogno tramite una espressione regolare (http://blog.chalda.it/guida-alla-sintassi-delle-espressioni-regolari-217.html)

  5. 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 😐

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

    \

  7. Mi sa ti sei stancato di me 😀

  8. ciao,
    io devo prendere il valore di una textbox all’interno di un IFrame, ed usarlo per fare un calcolo nella pagina principale, sai essermi d’aiuto?


I trackback sono disattivati.