Acceder a los elementos de un iframe con Javascript [Jquery]

Actualización: 1/2/2012
En este post aprenderemos a acceder a los elementos de un iframe utilizando jquery/Javascript para obtener sus datos, remplazarlos u otras necesidades que puedan surgir.

Estos días estoy trabajando en un plugin que creo puede ser de mucha utilidad para los webmasters con la aparición del botón de google mas uno.
Sin embargo me encontré con la necesidad de acceder a datos que están alojados dentro de un iframe.

Y, aunque al final no me sirvió para mi necesidad, vengo a compartir el conocimiento con ustedes.

A tener en cuenta

Hay una cosa a tener en cuenta antes de empezar son las políticas de mismo origen.

Las políticas del mismo origen son unas normas de seguridad que nos bloquean el acceso a dominios externos entre otras cosas.
Es decir, con javascript no vamos a poder acceder a un iframe de google.es o de cualquierpaginaexterna.com

Acceder a los elementos de un iframe

Ahora que conocemos la norma básica de los iframes en javascript vamos a ver como acceder a un iframe utilizando jquery

Este será nuestro iframe:
 
 
 
 
 
 
 
 
 
 
 

<html>
<head></head>
<body></body>
<div id="someID">Hello world!</div>
</html>

Y este nuestro código completo:

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script language="javascript">
	$().ready(function () {
		$("#iframeID").load(function () {
			alert($(this.contentDocument).find('#hplogo').html());
 
 
		});
	});
</script>
 
</head>
<body></body>
<iframe id="iframeID" name="iframeID" src="http://www.google.es"></iframe>
<p id="myid">test</p>
</html>

Tenemos que tener en cuenta que hay que esperar a que cargue nuestra página y una vez cargada la página esperar a que cargue el iframe.
Ya que puede ser que le iframe tarde mas en cargar que la página.

Una vez cargadas ambas solo tenemos que acceder a ellas utilizando contentDocument y $.find().

De esta forma ya hemos accedido a los datos de un iframe en nuestro hosting.

solo resta programar y obtener los resultados deseados.


Así nos han encontrado!

  • iframe jquery
  • jquery iframe
  • iframe con jquery
  • acceder a elementos de un iframe con jquery
  • iframe en jquery
  • acceder iframe jquery
  • iframe con javascript
  • acceder a los elementos de un iframe
  • acceder iframe javascript
  • javascript acceder iframe
  • leer variable input frame hijo de javascript
  • content

8 Responses to Acceder a los elementos de un iframe con Javascript [Jquery]

  1. lucas dice:

    hola me intereso todo esto ahi alguna manera de que busque lo que esta adentro del iframe pero que busque específicamente la dirección que esta en:
    href=”http://www.ejemplo.com

    para espesifica un poco tendria que encontrar donde esta esto:

    <a href="http://www.ejemplo.com

  2. nax dice:

    aqui no tengo un site para hacer pruebas pero si no me equivoco sería algo así:

    $(this.contentDocument).find(‘a[href^=”http://www.ejemplo.com”]’).html()

    Ten en cuenta que eso saca 1 coincidencia.. más coincidencias podría darte problemas y tendrías que usar .each() (http://api.jquery.com/each/)

    ya haré algún post sobre each ;)

    gracias por el comentario!

  3. LordCaos dice:

    Precisamente lo que necesitaba, voy a aplicarlo a ver como me va, gracias :-D…

  4. Rictus dice:

    Muy bueno el post, me ha solucionado perfectamente el problema de acceder a los elementos dentro del iframe. Muchas gracias!!!

  5. Encore2002 dice:

    Esto es con un el cual va a cargar una página específica, pero ¿cómo hago para acceder a uno que no tiene ningún documento (o página) asociada?

    Por ejemplo los editores de texto web que sustituyen un con y quiero acceder a los valores del antes que suceda el SUBMIT del formulario.

    Gracias!

  6. Encore2002 dice:

    Esto es con un IFRAME el cual va a cargar una página específica, pero ¿cómo hago para acceder a uno que no tiene documento (o página) asociada?

    Por ejemplo los editores de texto web que sustituyen un TEXTAREA con IFRAME y quiero acceder a los valores del IFRAME antes que suceda el SUBMIT del formulario.

    Gracias!

  7. Anonymous dice:

    Para el editor ckeditor localiza el id del DIV que ha sido añadido después del textarea:

    var cadena = $(‘#cke_req_message iframe’).contents().find(‘body’).html();

    cadena contendrá el código HTML

  8. Andres dice:

    Gracias por la información, me sirivio de mucho!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">