BorrowBits
Portada » Blog » Computación » Programación » Tutorial » Trucos y notas jQuery: ¿cómo acceder al contenido de un iframe?

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.

Angel H.

Tecnófilo irreparable y lector insaciable. Emigrante e inmigrante. Además de eso, Ingeniero de Telecomunicaciones y Product Manager. +10 años de experiencia en proyectos de Software, Cloud e Ingeniería de Redes. Me apasiona el DIY, la tecnología Blockchain y las Finanzas.

7 comentarios

  • Información Bitacoras.com

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

  • Hola primero que nada que buen post es lo que necesito solo que tengo un detalle a mi no me funciona mi codigo es el siguente:

    Tu navegador no soporta frames!!

    en contact.php tengo este campo:

    y trato de acceder a el asi:
    var aux = $(‘#iframeId’).contents().find(‘#iframeH’).val();

  • disculpa el codigo es el sig:

    (iframe id=»iframeId» name=»iframeId» src=»contact.php» frameborder=»0″ height=»0″) (/iframe)

    el campo de contact.php es este:
    (input type=»hidden» id=»iframeH» name=»iframeH» xvalue=»» /)

  • Hola, excelente articulo, oye, me gustaría saber si existe una forma de hacer eso mismo pero al revez, o sea, que desde un div que se encuentre dentro de un iframe yo pueda modificar cosas en la pagina padre que contiene el iframe.

  • Hola, antes de nada gracias por todo y buen post.
    Mi problema es el siguiente, no es exactamente lo que explicas lo que quiero.
    Yo tengo un Object en lugar de un Iframe que me introduce HTML extermo en mi web.
    Y necesito saber el height de un div que hay dentro.
    El código que tengo es:
    $(«#buscadorExt»).contents().find(«#map»).height();
    Al lanzar eso en un alert ne da un null y me estoy volviendo loco si pudieras echarme una mano.

  • Hola,
    genail el post, me ha funcionado bastante bien.
    Quería saber si puedes poner un link dónde podamos encontrar cómo hacerlo desde un iframe en otro servidor como apuntas al final del post.

    Muchas gracias.

Angel H.

Tecnófilo irreparable y lector insaciable. Emigrante e inmigrante. Además de eso, Ingeniero de Telecomunicaciones y Product Manager. +10 años de experiencia en proyectos de Software, Cloud e Ingeniería de Redes. Me apasiona el DIY, la tecnología Blockchain y las Finanzas.

Suscríbete

¡Sácale el máximo partido a BorrowBits!

Apúntate para seguir recibir por email las nuevas publicaciones, noticias sobre Blockchain pre-filtradas y material exclusivo para suscriptores. De momento es gratis:

{subscription_form_1}

Categorías

Bits del pasado

Sitio patrocinado por:

JitKey rentabilización apartamentos turísticos

JITKey.- Startup enfocada en la gestión de alojamientos turísticos.