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 166 posts

<p>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.</p>

You might also like

Desarrollo 0 Comments

Cómo descargar un backup de todas tus publicaciones de Tumblr (y guardarlo en el formato que quieras)

Tras una breve pero tortuosa investigación, os comparto la solución a un problema que parece estar poco documentado: cómo guardar todas las publicaciones de una cuenta de Tumblr en un

Desarrollo 1Comments

DrupalCamp Spain 2014

Este fín de semana la capital del Turia ha acogido a la DrupalCamp Spain 2014, a la cual fuí en calidad de ponente. No puedo dejar pasar la oportunidad de

Desarrollo 3 Comments

Cómo programar más rápido: Las 7 claves fundamentales

Estas reglas de oro, cada una más importante que la anterior, son tan simples como poderosas. Te aconsejo que no las tomes a la ligera. Notarás como tu tiempo de

Tecnologia & Ciencia 14 Comments

El problema de desplegar redes ad hoc en Android OS: ¿rootear el dispositivo?

El estándar Wi-Fi (IEEE 802.11) puede operar básicamente en dos modos: Infraestructura (o “managed”), en el que los clientes se conectan a un punto de acceso o router. Ad-hoc, también llamado

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,

Desarrollo 1Comments

Truco: Abortar peticiones AJAX pendientes antes de enviar otra

En algunas ocasiones interesa cancelar o detener varias peticiones AJAX que ya han sido realizadas. En un sistema muy asíncrono, puede que unas llamadas sean más prioritarias que otras o

Redes de Sensores Inalámbricos 9 Comments

Utilizando Wi-Fi Direct como alternativa “ad hoc” en Android

Hace unos meses comentábamos el problema de desplegar redes ad hoc en Android. Actualmente el modo ad-hoc está deshabilitado por defecto, por lo que nuestra única opción es modificar nuestra versión

Desarrollo 4 Comments

Cuándo dejar de ver el Mundo como un Ingeniero: quien esté libre de optimizar…

Confucio reunió a sus discípulos y les dijo: “Un optimista ve un vaso medio lleno. Un pesimista ve un vaso medio vacío. Un ingeniero ve un vaso demasiado grande“. Lo

Android 1Comments

[Evento] Introducción a Appcelerator Titanium y conexión con un backend en PHP

El día 5 de setiembre de 2014 tendré la oportunidad de hablar en el grupo de PHP Valencia acerca de como  crear una app móvil con el entorno de desarrollo

7 Comments

  1. iframePerson
    octubre 18, 12:34 Reply

    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.

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

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

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

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

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