JavaScript: come accedere al DOM di un elemento iframe

Di seguito vedremo come accedere al DOM di un elemento iframe con JavaScript.

Come funziona l'elemento iframe

Quando si utilizza questo elemento per caricare una pagina remota, il browser creare un documento del tutto nuovo all'interno della pagina ospite. Quindi nella console vedremo qualcosa come:


<iframe src="https://sitoremoto.tld/pagina.html" id="iframe">
	#document
	<html>
		<head></head>
		<body>
			<p id="test">Test</p>
		</body>
	</html>
</iframe>

L'elemento con ID test viene visualizzato nella pagina corrente, ma è ubicato nella struttura DOM della pagina remota, non in quella della pagina corrente. Quindi scrivere:


const test = document.getElementById('test');

non funzionerà, perchè l'interprete JavaScript cercherà nel DOM della pagina corrente, non in quello della pagina remota.

La soluzione


'use strict';

const iframe = document.getElementById('iframe');
const docIframe = (iframe.contentWindow || iframe.contentDocument);

const test = docIframe.document.getElementById('test');

console.log(test.firstChild.nodeValue); // 'Test'
Torna su