Icono del sitio BorrowBits

Trucos y notas jQuery: ¿cómo acceder al contenido de un iframe?

html iframe matrioska

Hoy he aprendido (¡gracias, Santi G!) un truco de programación web muy valioso para conseguir acceder a nodos y contenidos de un <iframe>. Un iframe es un elemento estándar de HTML que permite incrustar un documento HTML dentro de otro.

Nos vamos a servir del omnipotente y omnipresente jQuery. Al turrón:

1) Imaginad que tenemos el siguiente iframe incrustado en nuestro documento HTML:

<iframe id="mi_iframe" src="http://midominio/doc.html"...></iframe>

2) Sabemos que dentro de este <iframe> se cargará un nodo (un div, una imagen… lo que sea) que queremos manipular. Por ejemplo:

<div id="mi_nodo">Contenido HTML</div>

3) Y ahora viene el quid de la cuestión: ¿cómo localizar dicho elemento? Así mismo:

$("#mi_iframe").contents().find("#mi_nodo");

Y ya está. Lo demás es jQuery «de toda la vida». Por ejemplo, ¿queremos obtener el contenido HTML de esta caja?

$("#mi_iframe").contents().find("#mi_nodo").html()

O, ¿tal vez queremos eliminar el div completamente?

$("#mi_iframe").contents().find("#mi_nodo").remove()

Y así con todo lo que se os ocurra.

Es importante destacar que este truco sólo funcionará cuando el documento descargado en el iframe proceda del mismo servidor. Es una restricción de seguridad contemplada en la llamada Política del mismo origen (same origin policy).

Eso no significa que no existan técnicas para saltársela con nocturnidad y alevosía, pero esa cuestión la abordaremos en otra ocasión.

Salir de la versión móvil