Cambiar el contenido de un IFRAME vía jQuery

Si tenéis que cargar contenido de otra página/web a través de un iframe os encontrareis que no se puede cambiar el estilo de este ya que es en origen. Es decir, saldrá con el aspecto de la otra web y puede que no sea coincidente con lo que estáis haciendo.

Pero tranquilos, a través de jQuery podemos hacer un apaño que, en algunos casos, nos puede valer.

Imaginemos que tenemos este iframe:

<iframe id="el_iframe" name="el_iframe" src="otrapagina.html" width="620" height="400"></iframe>

Si, justo después del propio iframe (recomendado, aunque se puede poner tras el evento onload) tocamos los css buscando en el contenido del iframe podremos darle el aspecto que necesitemos.


					

tuti

Técnico en Comunicación Interna de la UVa

7 comentarios en “Cambiar el contenido de un IFRAME vía jQuery”

  1. Hola, esto solo funciona si la pagina qeu traes en el iframe es de tu propio servidor, si es una pagian de otro lado no funiona. Es correcto? o hay alguna otra manera de modificarla tambien. Gracias.

    1. Si la pagina es de otro equipo no hay forma de hacerlo via javascript por temas de cross scripting. Vamos, que no es que no se pueda hacer, es que el navegador lo bloquea salvo que haya cambiado las preferencias de dicho navegador. La unica forma es hacerlo desde el servidor con programación de terceros (PHP, JSP, C#…).

  2. Hola amigo, gracias por la info muy útil! solo tengo un inconveniente en el que ojalá me puedas ayudar, el código me funcionó bien solo en internet explorer, pero cuando abro el archivo en chrome pareciera que no funcionara la edición del estilo del iframe con el código javascript, y por cierto tengo scripts activadas para todos los sitios en chrome, ojala puedas ayudarme, y mil gracias ya!

    1. Como hemos dicho, es por temas de Cross Scripting. El servidor al que accede el iframe tiene que permitir el acceso desde otros sitios para poder hacerlo.

  3. Hola
    Ehh querido descargar un vídeo de youtube el original tal cual lo subio el autor
    o por lo menos con la máxima calidad no se como eh llegado aquí pero me pareció interesante eh igual e encontrado problemas con chrome como es de Google Inc. supongo da ventaja en sus paginas «youtube» etc
    nesecito aprender muchas cosas o algo basico jeje
    eh encontrado 3 diferencias en sus links dependiendo la calidad va de mayor a menor calidad.
    espero que este en el sitio correcto
    71866498
    24439434
    4677995
    1492997439287588
    1492997539328783
    1492997538601565
    C373BD514F280703460AC08B15788CB15B33E2F1.D0459C2487BAD2266E50C8CE9D41C8CD1304FB8F
    A7BB8C4DF971DAA4EF2CF5001A10F602D7589B82.06229EAF672394AB3103FD277DA1F48944FC61AE
    5D1AD8919B92AB789CEFB786F57D45591AD1EFC7.8B120498EA61F3055DFB39912B696F80BFCE42E7

    https://r6—sn-0opoxu-hxmr.googlevideo.com/videoplayback?expire=1502590787&requiressl=yes&clen=71866498&mime=video%2Fwebm&ipbits=0&initcwndbps=562500&usequic=no&sparams=clen%2Cdur%2Cei%2Cgir%2Cid%2Cinitcwndbps%2Cip%2Cipbits%2Citag%2Ckeepalive%2Clmt%2Cmime%2Cmm%2Cmn%2Cms%2Cmv%2Cpcm2%2Cpl%2Crequiressl%2Csource%2Cusequic%2Cexpire&ms=au&id=o-ALUlXNokQPfLuk-gFpTPuQrQkbFBthnC1z9cYDl3rP0R&ei=42KPWfasA8W2_QHp5KOwBQ&mv=m&mt=1502569066&keepalive=yes&dur=260.635&pl=20&source=youtube&lmt=1492997439287588&ip=189.228.21.5&key=yt6&gir=yes&mn=sn-0opoxu-hxmr&mm=31&itag=271&pcm2=yes&alr=yes&ratebypass=yes&signature=C373BD514F280703460AC08B15788CB15B33E2F1.D0459C2487BAD2266E50C8CE9D41C8CD1304FB8F
    https://r6—sn-0opoxu-hxmr.googlevideo.com/videoplayback?expire=1502590787&requiressl=yes&clen=24439434&mime=video%2Fwebm&ipbits=0&initcwndbps=562500&usequic=no&sparams=clen%2Cdur%2Cei%2Cgir%2Cid%2Cinitcwndbps%2Cip%2Cipbits%2Citag%2Ckeepalive%2Clmt%2Cmime%2Cmm%2Cmn%2Cms%2Cmv%2Cpcm2%2Cpl%2Crequiressl%2Csource%2Cusequic%2Cexpire&ms=au&id=o-ALUlXNokQPfLuk-gFpTPuQrQkbFBthnC1z9cYDl3rP0R&ei=42KPWfasA8W2_QHp5KOwBQ&mv=m&mt=1502569066&keepalive=yes&dur=260.635&pl=20&source=youtube&lmt=1492997539328783&ip=189.228.21.5&key=yt6&gir=yes&mn=sn-0opoxu-hxmr&mm=31&itag=247&pcm2=yes&alr=yes&ratebypass=yes&signature=5D1AD8919B92AB789CEFB786F57D45591AD1EFC7.8B120498EA61F3055DFB39912B696F80BFCE42E7
    https://r6—sn-0opoxu-hxmr.googlevideo.com/videoplayback?expire=1502590787&requiressl=yes&clen=4677995&mime=video%2Fwebm&ipbits=0&initcwndbps=562500&usequic=no&sparams=clen%2Cdur%2Cei%2Cgir%2Cid%2Cinitcwndbps%2Cip%2Cipbits%2Citag%2Ckeepalive%2Clmt%2Cmime%2Cmm%2Cmn%2Cms%2Cmv%2Cpcm2%2Cpl%2Crequiressl%2Csource%2Cusequic%2Cexpire&ms=au&id=o-ALUlXNokQPfLuk-gFpTPuQrQkbFBthnC1z9cYDl3rP0R&ei=42KPWfasA8W2_QHp5KOwBQ&mv=m&mt=1502569066&keepalive=yes&dur=260.635&pl=20&source=youtube&lmt=1492997538601565&ip=189.228.21.5&key=yt6&gir=yes&mn=sn-0opoxu-hxmr&mm=31&itag=242&pcm2=yes&alr=yes&ratebypass=yes&signature=A7BB8C4DF971DAA4EF2CF5001A10F602D7589B82.06229EAF672394AB3103FD277DA1F48944FC61AE
    mi correo: neabjs@gmail.com

Deja una respuesta

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.