Usar CSS para afectar el estilo div dentro del iframe

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

Necesitas JavaScript Es lo mismo que hacerlo en la página principal, excepto que debe poner un prefijo al comando 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 provenga de su propio servidor.

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

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

o

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

En resumen, no.

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

Sí. Eche 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); 

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

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

 var addCssToIframe = function() { if ($('#myIframe').contents().find("head") != undefined) { $('#myIframe') .contents() .find("head") .append( ''); $interval.cancel(addCssInterval); } }; var addCssInterval = $interval(addCssToIframe, 500, 0, false); 

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

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

probablemente no de la manera que estás pensando. el iframe debería en el archivo css también. Y no puedes hacerlo incluso con javascript si está en un dominio diferente.

Al parecer, se puede hacer a través de jQuery:

 $('iframe').load( function() { $('iframe').contents().find("head") .append($("")); }); 

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

Sí, es posible aunque engorroso. Debería imprimir / hacer eco del código HTML de la página en el cuerpo de la página y luego aplicar una función de cambio de regla CSS. Utilizando los mismos ejemplos que se mencionan anteriormente, esencialmente utilizaría un método de análisis para encontrar los divs en la página, y luego aplicarle el CSS y luego volver a imprimir / repetir el eco para el usuario final. No necesito esto, así que no quiero codificar esa función en cada elemento del CSS de otra página web para su incorporación.

Referencias

Una especie de forma de hack-ish de hacer las cosas es como dijo Eugene. Terminé siguiendo su código y vinculo 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 poco de eludir Twitter para anular su código un smidgen. Ahora tenemos una línea de tiempo progresiva con nuestro CSS, la fuente IE Larger, la altura de línea adecuada y la barra de desplazamiento oculta para alturas mayores 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 

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 buscar la página desde el código del lado del servidor y cambiar el CSS necesario.