Appunti di viaggio

Come accedere ad elementi in un iframe

con jQuery e in valilla

Chalda Pnuzig

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

<iframe id="iframe" src="..."></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:

const $title = $('#iframe').contents().find('title');

oppure in javascript puro:

const $title = document.getElementById('iframe').contentDocument.querySelector('title');
console.log($title.textContent);

Con questo esempio potete accedere a qualsiasi elemento dell'iframe semplicemente sostituendo title con i selettori che vorrete :)

Qui di seguito l'iframe di esempio che utilizzano i codici qui sopra

Scritto da Chalda Pnuzig il

Commenti

winz

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à.

chalda

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);
winz

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

chalda

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

winz

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 :|

robbe

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?

chalda

Basta fare:

let value = document.getElementById('iframe').contentDocument.getElementById('idCampo').value;
Francesco

Ciao, grazie per l'articolo. Volevo chiederti, in questo modo, posso anche cambiare il css di un determinato elemento all'interno del div.

Premetto che sto inserendo nel mio sito joomla un iframe che contenga una pagina web esterna.

Questa pagina, all'interno del mio sito, vorrei prendesse un pò più le sembianze del mio css, ad esempio cambiando colori di alcuni elementi (per non essere troppo diversi dal mio sito).

Sai consigliarmi un metodo per poterlo fare? Ovviamente non voglio cambiare il css del sito che voglio embeddare, ma solo ciò che si vede nel mio sito.

(Esempio, metto nella pagina del mio sito una pagina con un testo, e vorrei che nel mio sito questo iframe (o se consigli altro dimmi pure) abbia il testo dello stesso colore del mio sito, e non di quello del sito originale che sto inserendo come iframe..

Grazie mille :)

Alberto74

Grazie,ma il contrario lo posso fare? Cioè sono nella pagina php dell'iframe. Pagina richiamata nel tag iframe. All'interno di questa è possibile modificare un elemento della pagina 'padre' dove è contenuto il tag iframe? Cioè è possibile accedere agli oggetti dom all'esterno dell'iframe? E se si, come è la sintassi? Grazie!

Lascia un commento