Usar CSS para afectar el estilo div dentro del iframe


Respuestas:


117

Necesitas JavaScript Es lo mismo que hacerlo en la página principal, excepto que debe anteponer su comando de JavaScript con el nombre del iframe.

Recuerde, se aplica la misma política de origen, por lo que solo puede hacer esto con un elemento de marco flotante que provenga de su propio servidor.

Utilizo el marco de Prototype para hacerlo más fácil:

frame1.$('mydiv').style.border = '1px solid #000000'

o

frame1.$('mydiv').addClassName('withborder')

2
mira mi esta pregunta es similar stackoverflow.com/questions/1962707/… pero ¿no podemos cambiar el estilo si el marco es de otro servidor?
Jitendra Vyas

16
Eso es correcto. El contenido de Iframe está sujeto a la política del mismo dominio. Si es de su dominio, puede controlarlo, si no, está bloqueado. Esto evita todo tipo de secuestro de páginas basado en Iframe.
Diodeus - James MacFarlane

2
No es exactamente una solución "solo CSS", pero es lo suficientemente bueno para mí. +1
Nicu Surdu

2
Esto no es CSS.
stramin

103

En resumen no.

No puede aplicar CSS a HTML que se carga en un iframe, a menos que tenga control sobre la página cargada en el iframe debido a restricciones de recursos entre dominios.


55
Esto es cierto, pero en realidad no ayuda a las personas a dar un ejemplo de cómo hacerlo
Simon Dragsbæk

¿Esto acaba de aparecer en 2018? Recuerdo que solía configurar el estilo del iframe desde afuera. Traté de aplicar css al iframe que representaba el script, pero todavía no funciona.l
Võ Minh

46

Si. Eche un vistazo a este otro hilo para obtener detalles: ¿Cómo aplicar CSS a iframe?

var cssLink = document.createElement("link");
cssLink.href = "style.css";  
cssLink.rel = "stylesheet";  
cssLink.type = "text/css";  
frames['frame1'].document.body.appendChild(cssLink); 

44
¿Es frame1 el id del iframe?
Toni Michel Caubet

55
Sí, frame1 es el id del iframe.
Eugene Rosenfeld

3
Esto no es CSS.
stramin

44
esto no podemos hacerlo si estamos cargando diferentes dominios en iframe.
Sunith Saga

frame1es el nombre del iframe, no el ID
joseantgv

14

Puede recuperar el contenido de un iframeprimero y luego usar jQueryselectores contra ellos como de costumbre.

$("#iframe-id").contents().find("img").attr("style","width:100%;height:100%")

$("#iframe-id").contents().find("img").addClass("fancy-zoom")

$("#iframe-id").contents().find("img").onclick(function(){ zoomit($(this)); });

¡Buena suerte!


11
no funciona: DOMException no capturada: no se pudo leer la propiedad 'contentDocument' de 'HTMLIFrameElement': bloqueó un marco con el origen " HOST " para que no acceda a un marco de origen cruzado.
tubbo

@tubbo, en su caso, no puede incrustar sitios no autorizados impedidos de XSS. Esto es solo para aquellos que buscan sus propios problemas, no para hackers: p
Riyaz Hameed

10

La respuesta rápida es: No, lo siento.

No es posible usar solo CSS. Básicamente, debe tener control sobre el contenido del iframe para darle estilo. Hay métodos que utilizan JavaScript o el idioma de su elección (sobre los que he leído un poco, pero no estoy familiarizado conmigo mismo) para insertar dinámicamente algunos estilos necesarios, pero necesitaría un control directo sobre el contenido del iframe, que suena como si no tuvieras


8

Use Jquery y espere hasta que se cargue la fuente, así es como lo he logrado (intervalo angular utilizado, puede usar el método setInterval de JavaScript):

var addCssToIframe = function() {
    if ($('#myIframe').contents().find("head") != undefined) {
        $('#myIframe')
                .contents()
                .find("head")
                .append(
                        '<link rel="stylesheet" href="app/css/iframe.css" type="text/css" />');
        $interval.cancel(addCssInterval);
    }
};
var addCssInterval = $interval(addCssToIframe, 500, 0, false);

1
¿Por qué no usas el evento cargado de iframe?
ProllyGeek

3

probablemente no de la forma en que estás pensando. el iframe también debería estar <link>en el archivo css. Y no puede hacerlo incluso con JavaScript si está en un dominio diferente.


¿Puede dar un ejemplo de cómo se puede hacer esto? ¿Quieres decir algo así <iframe src="/source" link=css-stylesheet:"/css.css">?
Ant

3

Aparentemente se puede hacer a través de jQuery:

$('iframe').load( function() {
    $('iframe').contents().find("head")
      .append($("<style type='text/css'>  .my-class{display:none;}  </style>"));
});

https://stackoverflow.com/a/13959836/1625795


3
Ya no puede usar esto debido a la misma política de origen en el navegador Chrome. El mensaje de error:Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin **** from accessing a cross-origin frame.
Mohammad AlBanna

@adamj, ¿podemos cambiar la hoja de estilo de sobrescritura del elemento iframe? En caso afirmativo, por favor agregue script.
Supermodelo

2

Una especie de manera hack-ish de hacer las cosas es como dijo Eugene. Terminé siguiendo su código y enlazando a mi CSS personalizado para la página. El problema para mí fue que, con una línea de tiempo de Twitter, tienes que esquivar Twitter para anular un poco su código. Ahora tenemos una línea de tiempo continua con nuestro CSS, fuente IE más grande, altura de línea adecuada y ocultando la barra de desplazamiento para alturas más grandes que sus límites.

var c = document.createElement('link');
setTimeout(frames[0].document.body.appendChild(c),500); // Mileage varies by connection. Bump 500 a bit higher if necessary

1

Solo agregue esto y todo funciona bien:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

No estoy seguro de si esta es la respuesta correcta a la pregunta dada, pero fue una gran solución para cambiar el tamaño del formulario de Google al ancho del dispositivo, ¡muchas gracias!
shiftyscales

0

Sí, es posible aunque engorroso. Debería imprimir / repetir el HTML de la página en el cuerpo de su página y luego aplicar una función de cambio de regla CSS. Usando los mismos ejemplos dados anteriormente, esencialmente estaría utilizando un método de análisis para encontrar los divs en la página, y luego aplicar el CSS y luego reimprimirlo / repetirlo al usuario final. No necesito esto, así que no quiero codificar esa función en cada elemento en el CSS de otra página web solo para aplicar.

Referencias


La pregunta específicamente pregunta "usando solo CSS". Con eso en mente, su respuesta es incorrecta.
Serj Sagan

Esto no es CSS.
stramin

0

Combinando las diferentes soluciones, esto es lo que funcionó para mí.

$(document).ready(function () {
    $('iframe').on('load', function() {
        $("iframe").contents().find("#back-link").css("display", "none");
    }); 
});

-1

No es posible desde el lado del cliente. Se generará un error de JavaScript "Error: Permiso denegado para acceder a la propiedad" documento "" ya que el Iframe no forma parte de su dominio. La única solución es obtener la página del código del lado del servidor y cambiar el CSS necesario.


2
Esta respuesta es correcta en su contenido, pero se relaciona con JavaScript, mientras que la pregunta se relaciona con CSS. La respuesta puede ser que necesita usar JavaScript, pero no lo dice. La respuesta también supone que el contenido del iFrame es de un dominio diferente, lo cual no siempre es el caso. Por último, el mensaje exacto variará de un navegador a otro.
pwdst
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.