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

modify iframe

Question

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

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5

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.

Answer 6

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.

Answer 7

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!

Answer 8

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:

• Imprimiendo contenido de IFRAME
• Accediendo e imprimiendo código fuente HTML usando PHP o JavaScript
• http://www.w3schools.com/js/js_htmldom_html.asp
• http://www.w3schools.com/js/js_htmldom_css.asp

Answer 9

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

Answer 10

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

Answer 11

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