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

No sé si me hice ingeniero porque soy un escritor frustrado o soy un escritor frustrado porque me hice ingeniero. En cualquier caso ahora escribo en un blog sobre ingeniería (de vez en cuando).

You might also like

Desarrollo 3 Comments

La Gestalt y los framework front-end: los programadores que no sabían diseñar.

Hay un dicho muy 2.0 que reza: “Diseñas peor que un programador“. ¿Es eso cierto? Me gustaría decir que no, pero se trata de una verdad como un templo: el

Developer Angel, una interesante forma de invertir en una Start-up

El otro día estuvimos charlando un buen rato con @miguelfc (CEO de Spiral Startups) sobre un problema muy recurrente a la hora de poner en marcha una empresa innovadora de base tecnológica:

Tutorial 10 Comments

Claves para proteger y recuperar tu portátil robado.

Sin duda, una de las situaciones más estresantes e incómodas que se puedan sufrir. Estás trabajando en una biblioteca con tu ordenador, vas un momento a coger un libro de

Internet 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 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

Desarrollo 10 Comments

How-to: configurar un JSTree sencillo

Uno de los plugin jQuery más útiles de los que he descubierto recientemente es JSTree, un componente javascript bastante completo e interesante para interfaces de usuario basadas en web. Sirve

Android 1Comments

The App Fake

Hace unos días, un viejo amigo, @jaboban me invitó a ir a un evento: The App Date. Una reunión de desarrolladores o aficcionados está patrocinada por Telefónica (me niego a

Tecnologia & Ciencia

Framework: ¿Por qué es mejor usarlos?

Un Framework es un conjunto de librerías y conceptos preparados para ser utilizados en tus proyectos. Te olvidarás de muchos problemas tediosos, que otros programadores ya han solucionado. Soluciones que

Desarrollo 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

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