selectores - Usando CSS para afectar el estilo div dentro de iframe




etiquetas style (10)

Sí. Echa un vistazo a este otro hilo para más 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); 

¿Es posible cambiar los estilos de un div que reside dentro de un iframe en la página usando solo CSS?


Sí, es posible aunque engorroso. Necesitará imprimir / hacer eco del 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 que se dieron anteriormente, esencialmente estaría usando un método de análisis para encontrar los divs en la página, y luego aplicarle el CSS y luego reimprimirlo / devolverlo al usuario final. No necesito esto, así que no quiero codificar esa función en cada elemento del CSS de otra página web solo para aplicar.

Referencias:


Necesitas JavaScript. Es lo mismo que hacerlo en la página principal, excepto que debe prefijar 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 iframe que proviene de su propio servidor.

Utilizo el framework Prototype para hacerlo más fácil:

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

o

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

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://.com/a/13959836/1625795


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

No es posible usar solo CSS. Básicamente, necesitas tener control sobre el contenido de iframe para darle estilo. Existen métodos que usan javascript o el idioma de su elección en la web (sobre el que he leído un poco, pero no estoy familiarizado con mi persona) para insertar dinámicamente algunos de los estilos necesarios, pero necesitaría un control directo sobre el contenido del iframe, que parece como si no tuvieras


Use Jquery y espere hasta que se cargue la fuente. Así es como lo he logrado (Intervalo angular usado, 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);

Una forma de piratería 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 hacer un paso de twitter para anular su código de smidgen. Ahora tenemos una línea de tiempo móvil con nuestro css, fuente IE Larger, 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

Probablemente no sea la forma en que estás pensando. el iframe también tendría que <link> en el archivo css. Y no puedes hacerlo incluso con javascript si está en un dominio diferente.


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 es 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.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body
,html
{
    height: 100%;
    margin: 0;
    padding: 0;
    color: #FFF;
}

#header
{
    float: left;
    width: 100%;
    background: red;
}

#content
{
    height: 100%;
    overflow: auto;
    background: blue;
}

</style>
</head>
<body>

    <div id="content">
        <div id="header">
                Header
                <p>Header stuff</p>
        </div>
            Content
            <p>Content stuff</p>
    </div>

</body>
</html>

En todos los navegadores sanos, puede colocar el div "header" antes del contenido, como hermano, y el mismo CSS funcionará. Sin embargo, IE7 no interpreta la altura correctamente si el flotador es del 100% en ese caso, por lo que el encabezado debe estar EN el contenido, como se indicó anteriormente. El desbordamiento: automático causará barras de desplazamiento dobles en IE (que siempre tiene la barra de desplazamiento de la ventana gráfica visible pero deshabilitada), pero sin ella, el contenido se recortará si se desborda.





css iframe