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:

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

Previous Developer Angel, una interesante forma de invertir en una Start-up
Next 21 Formas de hacer tu web insegura: #1 - No valides formularios en el servidor

About author

Angel
Angel 164 posts

Creció viendo McGyver y ya de niño tenía muy claro en qué quería convertirse: inventor. Supuso que estudiar Ingeniería de Telecomunicación sería un buen camino para ello. Emprendedor y aventurero, bajo los circuitos y transistores le late un corazón de escritor.

You might also like

Desarrollo 0 Comments

Seguridad Web al limite: JS-Injection

Hace unos meses os comentaba en un artículo la importancia de validar los datos en el servidor, puesto que las validaciones en el cliente son fácilmente manipulables. Como también comentamos,

Android 8 Comments

Aprende Android: crea un cliente HTTP con HttpURLConnection

¿Estás desarrollando una aplicación para Android? ¿Necesitas que tu aplicación se comunique con algún servidor solicitándole algún servicio y gestionar la respuesta recibida? Sí ese es tu caso, puede que

Tecnologia & Ciencia 0 Comments

GIT: Guia rápida

¿Qué es GIT? Es un sistema de control de versiones, que nos va a permitir tener un control sobre el código de nuestras aplicaciones mediante revisiones, permitiendo a diferentes programadores

Desarrollo 1Comments

¿Cómo hacer un Servidor HTTP sencillo?

Si estás desarrollando una aplicación destinada a la gestión de contenidos o al intercambio de información entre usuarios, puede que hayas tenido la necesidad de tener uno o varios servidores

Desarrollo 4 Comments

Cobol, el lenguaje que sigue resistiendo a pesar de su avanzada edad

Aunque Cobol es junto con Fortran, uno de los lenguajes de programación más antiguos hoy en día siguen escribiéndose unas 5.000 millones de líneas de código nuevas anualmente. Lo que

Tutorial 1Comments

Monsta, un cliente web FTP gratuito y abierto

¿Que es Monsta FTP? Es un cliente FTP de código abierto que puedes instalar fácilmente en cualquier servidor web. Está programado en PHP/Ajax y es muy sencillo de desplegar (sólo 2

Desarrollo 0 Comments

Truco: Actualizar la altura del contenedor de un árbol JSTree

Ya hemos hablado del plugin JSTree en otras ocasiones. Ahora abordarmos un problema muy particular, por lo que no debes seguir leyendo este apunte si no es tu caso (a

Desarrollo 1Comments

How-to: Parsear variables JSON con PHP

Puede ocurrir que nos interese decodificar un objeto JSON en una variable PHP. A mí me ha costado un pequeño dolor de cabeza, así que os transmito la lección aprendida

Desarrollo 0 Comments

12 trucos para diseñar el Formulario Perfecto

El formulario es un elemento fundamental para generar una buena conversión. De su buen diseño depende que un usuario no lo abandone antes de tiempo o que ni siquiera se

6 Comments

  1. Diego
    septiembre 12, 10:21 Reply

    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.

  2. Kevin
    mayo 22, 05:53 Reply

    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.

  3. Edgar
    agosto 16, 02:03 Reply

    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=”” /)

  4. Edgar
    agosto 16, 01:59 Reply

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

  5. Bitacoras.com
    octubre 22, 19:35 Reply

    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…

Leave a Reply