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

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.

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

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!

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

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

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.

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

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

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">

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

• Imprimir contenido de IFRAME
• Acceder e imprimir el 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

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

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.