style - selectores css




Usando CSS para afectar el estilo div dentro de iframe (8)

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

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


En definitiva 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.


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')

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.


Puede recuperar el contenido de un iframe primero y luego usar los selectores jQuery 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!


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:


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

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);




iframe