BorrowBits - ciencia y tecnología

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:

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

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

[html] <div id="mi_nodo">Contenido HTML</div>
[/html]

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

[html] $("#mi_iframe").contents().find("#mi_nodo");
[/html]

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

[html] $("#mi_iframe").contents().find("#mi_nodo").html()
[/html]

O, ¿tal vez queremos eliminar el div completamente?

[html] $("#mi_iframe").contents().find("#mi_nodo").remove()
[/html]

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

Siempre quise ser inventor y escritor: por lo primero me hice ingeniero, y en cuanto a lo segundo, escribo aquí de vez en cuando sobre telecomunicaciones y tecnología. Me gustan los robots, los perretes y los libros (analógicos).

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.

Suscríbete

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

Introduce tu dirección de correo electrónico para seguir este Blog y recibir por email las nuevas publicaciones, si has leído y aceptas las Políticas de Privacidad, Cookies y Aviso Legal.

Recíbelo gratis al suscribirte

Webs amigas

  • Frikilogia.- Blog Multi-Tematico orientado a todos los campos del frikismo.
  • Meridiem90.tv.- Mira la TV gratis en HD. Canal Plus y Gol TV, todo el futbol desde tu navegador.
  • JITKey.- Startup enfocada en la gestión de alojamientos turísticos.

Bits del pasado

Síguenos en FB