1

Tengo un código JavaScript que lo añado a una página web y este muestra un anuncio (banner) publicitario que es distinto en cada petición (request) dentro de un iframe (algo así como Google AdSense para que nos entendamos).

Necesito acceder a este iframe para obtener alguna información en cada una de las peticiones. Concretamente la URL de la imagen y el link del hipervinculo de cada banner generado. Como ya he dicho, esta información es distinta en cada petición ya que son anuncios dinámicos y son diferentes para cada usuario.

La pregunta es, ¿cómo puedo evitar la política cross-domain de los navegadores para poder acceder/leer a esta información que está dentro de un iframe? O a alguien se le ocurre alguna manera o alternativa para conseguir esto?

Muchas gracias por adelantado.

4
  • ¿Según lo que entiendo, lo que quieres hacer es conseguir la URL dinámicamente de cada etiqueta iframe? el 31 ene. 2019 a las 4:20
  • favor de no usar la zona de respuestas para hacerle preguntas o comentarios al OP respecto de su pregunta, este espacio es solo para dar respuestas
    – user75901
    el 31 ene. 2019 a las 4:21
  • Así es! la URL del destino de ese banner en ese iframe y la URL de la imagen del mismo. el 31 ene. 2019 a las 4:23
  • tendrías que programar el html del banner para que envíe mensajes al html padre, aquí hay un ejemplo: es.stackoverflow.com/a/208452/81450 el 7 feb. 2019 a las 13:45

4 respuestas 4

1

Siento darte esta respuesta, pero no se puede... Puede que en local puedas, pero CORS siempre te va a joder, yo estuve pegandome muchisimo para modificar estilos del iframe y no hay manera CORS siempre te jode.

Lo unico que saque en claro es que mediante QuerySelectors bien realizados puedes extraer información del iframe que ya este mostrada en la pagina web que lo contiene.

La unica solución para que puedas realizar cambios es que en las peticiones HTTP del iframe la dirección de origen de tus peticiones de cliente esten entre las URL de confianza del servidor web, entonces CORS te dara acceso a las modificaciones del iframe.

6
  • 1
    se pueden modificar estilos en iframe, hace un tiempo respondi a esa pregunta
    – Federico
    el 31 ene. 2019 a las 10:46
  • No modificas los estilos...eso es un efecto colateral de añadir un fichero css a el documento html del iframe, algo que es totalmente influenciado por la implementación del iframe.... Ponte que es un iframe de seguridad o con un minimo de protección, ¿Crees que va a dejar injectarte un codigo dentro de su cuerpo? el 31 ene. 2019 a las 11:15
  • Tu solución es valida para ciertos casos y no es una solución, mas bien es un fallo de seguridad de los iframe. No se pueden modificar estilos ni codigo de los iframe. Pero en ciertos casos donde la seguridad no es correcta, se le pueden añadir ciertos ficheros que modifican su comportamiento.... el 31 ene. 2019 a las 11:16
  • @RaúlGarcia Muchas gracias por tu respuesta, pero yo no necesito modificar estilos del iframe ni modificar absolutamente nada del iframe. Lo único que necesito es captar (o más bien, leer) el hipervinculo de un anuncio que esta en un iframe (como Google AdSense). Solo necesito saber la URL de ese banner generado. ¿Se te ocurre alguna manera posible para esto? Mil gracias el 3 feb. 2019 a las 23:11
  • En eso no habría problema, pon el codigo del iframe que ves con el inspector del chrome y vemos que podemos hacer el 4 feb. 2019 a las 16:41
0

Recuerda : iframe tiene una estructura como HTML es decir, aunque no lo veas el DOM seria asi :

<iframe .. >
   <html>
      <head>
      </head>
      <body>
      </body>
   </html>
</iframe>

suponiendo que al agregar una imagen en el iframe lo que estas haciendo seria algo por el estilo (ejemplo con jQuery)

$("#frame").contents().find("body").append("<img src="image.jpg">");

entonces a este punto tendrias que hacer lo siguiente (siempre utilizando jquery para el ejemplo)

var $iframe = $('#frame');
  $iframe.ready(function() {
      $iframe.contents().find("body").append('<a href="https://www.google.com">link a goole</a>');
      $iframe.contents().find("body").append('<img src="https://lh3.googleusercontent.com/proxy/Jwv1dUsrOR4aNjqeIoYmKrOtsi44ikSpaaGtiRfMlcGsv815vPaJrjt2OMwkef3bwVbr79b-cXamFr_QKJGRrIA2HUCn3QgWZ9yrbD7M6j3d_O86pYUdWLB5vgXyc_QR3cC2ZQ=w530-h212-p">');
      //sacar el href y src : 
      setTimeout(function(){
  		 $iframe.each(function(){
      		alert($(this).contents().find("a").attr("href"));
            alert($(this).contents().find("img").attr("src"))
  	     });
	  },100);
  });

ejemplo JSFiddle

espero que te sea de ayuda !

1
  • Buenas Federico eso no te va a funcionar... El cors va a cascar, solo te funciona por que lo realizas en local y no tienes activado esa funcionalidad el 31 ene. 2019 a las 11:20
0

Te añado la respuesta a tu problema....

supongamos que tienes una pagina web propia:

<html>
  <head></head>
  <body>
   <div class="iframeContainer">
      <iframe src="http://tubanner.es"></iframe>
   </div>
  </body>
</html>

El banner se rellena con el banner que deseas... Nosotros creamos un script de javascript, usamos el framework de diseño que uses... No importa mucho siempre que estes usando javascript y usamos el siguiente codigo.

var iframes = document.querySelector("iframe"); //te da los Iframes de la pagina
var iframeDocument = iframes.contentWindow.document; //Con esto tenemos el iframe

Ahora supongamos que queremos el banner que se encuentra en un tag div que tiene una clase bannerUrl o un button que tiene el id bannerUrl, pues hariamos esto:

var div = iframeDocument.querySelector(".bannerUrl"); //devuelve el div del banner
var button = iframeDocument.querySelector("#bannerUrl"); //devuelve el button del banner

Luego mirando las variables tendras todos los datos que tienes permiso a acceder, te paso la documentación de QuerySelector para que puedas ver que puedes hacer:

https://developer.mozilla.org/es/docs/Web/API/Document/querySelector

Saludos!!

0

No puedes leer directamente como ya te han comentado. Pero puedes comunicarte con el iframe, aunque para eso deberas de dotar de JS al contenido del iframe, por lo que tendrás que tener acceso al servidor desde donde se sirven.

Puedes comunicar la pagina madre y el iframe con llamadas de este tipo:

document.getElementById('myIframe').contentWindow.postMessage(misdatos, '*');

Y recibir los datos con:

window.addEventListener('message', function(e) {}

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.