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

Siempre quise ser inventor y escritor. Pero mientras tanto trabajo en Alemania como Ingeniero de Telecomunicaciones, y de vez en cuando escribo aquí sobre Ciencia y Tecnología. Me gustan los robots y los libros (analógicos).

You might also like

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

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

Internet 3 Comments

Validación de formularios con Jquery Engine: Instalación y cómo usarlo en 5 minutos

Os presento este simpático plugin de Jquery que os permitirá realizar validaciones en el cliente de una manera muy sencilla y rápida. Puesto que aun las validaciones HTML5 no tienen

Desarrollo 0 Comments

Importar en phpMyAdmin: ¿cómo incrementar el límite de fichero?

A veces necesitamos importar una base de datos de gran tamaño utilizando el gestor de phpMyAdmin. Si el máximo permitido es insuficiente para realizar dicha importación, debemos “agrandarle la boca”. Para

Desarrollo 2 Comments

Prototipado online en 5 minutos con Mockflow

El otro día me llama un cliente para pedirme presupuesto sobre una aplicación web. Le pregunto para cuándo y responde que para ahora mismo, wireframes incluidos. En condiciones normales lo

Tutorial 1Comments

[WordPress] Fatal error: Allowed memory size of 73400320 bytes exhausted

A.K.A. White Screen of Death. Si ya has trabajado con WordPress estoy seguro de que lo anterior te resultará familiar. Horriblemente familiar. Si no has trabajado aún con WordPress pero

Desarrollo 2 Comments

Qué es y cómo funciona Symfony2: Conceptos claves

Symfony2 es uno de los Framework más potentes que existen para desarrollar aplicaciones web. Punto. Pero, ¿cómo funciona? ¿Qué es realmente? Con este artículo, pretendo que te quede claro como

Tutorial 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

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

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