Anular el estilo del cuerpo para el contenido en un iframe

¿Cómo puedo controlar la imagen de fondo y el color de un elemento del cuerpo dentro de un iframe? Tenga en cuenta que el elemento del cuerpo incrustado tiene una clase y iframees de una página que forma parte de mi sitio.

La razón por la que necesito esto es que mi sitio tiene un fondo negro asignado al cuerpo, y luego un fondo blanco asignado a divs que contienen texto. Un editor WYSIWYG usa un elemento iframepara incrustar contenido al editar, pero no incluye el div, por lo que el texto es muy difícil de leer.

El cuerpo de iframecuando en el editor tiene una clase que no se usa en ningún otro lugar, así que supongo que esto se puso allí para que problemas como este puedan resolverse. Sin embargo, cuando aplico estilos class.body, no anulan los estilos aplicados al cuerpo. Lo extraño es que los estilos aparecen en Firebug, ¡así que no tengo idea de lo que está pasando!

Gracias

ACTUALIZACIÓN: he probado la solución de @ mikeq de agregar un estilo a la clase que es la clase del cuerpo. Esto no funciona cuando se agrega a la hoja de estilo de la página principal, pero funciona cuando se agrega con Firebug. Supongo que esto se debe a que Firebug se aplica a todos los elementos de la página, mientras que el CSS no se aplica dentro de los iframes. ¿Significa esto que agregar el CSS después de la carga de la ventana con JavaScript funcionaría?

Un iframe es un "agujero" en su página que muestra otra página web dentro de él. El contenido del iframe no tiene ninguna forma ni forma parte de su página principal.

Como han dicho otros, sus opciones son:

• dar al archivo que se está cargando en el iframe el CSS necesario
• si el archivo en el iframe es del mismo dominio que su padre, entonces puede acceder al DOM del documento en el iframe desde el padre.

Lo siguiente solo funciona si el contenido del iframe es del mismo dominio principal.

El siguiente script jquery funciona para mí. Probado en Chrome e IE8. El iframe interno hace referencia a una página que está en el mismo dominio que la página principal.

En este caso particular, estoy ocultando un elemento con una clase específica en el iframe interno.

Básicamente, simplemente agrega un elemento de 'estilo' a la 'cabeza' del iframe interno.

$('iframe').load( function() {
    $('iframe').contents().find("head")
      .append($("<style type='text/css'>  .my-class{display:none;}  </style>"));
});

No puede cambiar el estilo de una página que se muestra en un iframe a menos que tenga acceso directo y, por lo tanto, sea propietario de los archivos html y / o css de origen.

Esto es para detener XSS (Cross Site Scripting)

Un iframetiene otro alcance, por lo que no puede acceder al estilo o cambiar su contenido con javascript.

Básicamente es "otra página".

Lo único que puede hacer es editar su propio CSS, porque con su CSS global no puede hacer nada.

Anular otro dominio iframe CSS

Al usar parte de la respuesta de SimpleSam5 , logré esto con algunos de los iframes de chat de Tawk (su interfaz de personalización está bien, pero necesitaba más personalizaciones).

En este iframe particular que aparece en dispositivos móviles, necesitaba ocultar el ícono predeterminado y colocar una de mis imágenes de fondo. Hice lo siguiente:

Tawk_API.onLoad = function() {
// without a specific API, you may try a similar load function
// perhaps with a setTimeout to ensure the iframe's content is fully loaded
  $('#mtawkchat-minified-iframe-element').
    contents().find("head").append(
     $("<style type='text/css'>"+
       "#tawkchat-status-text-container {"+
         "background: url(https://example.net/img/my_mobile_bg.png) no-repeat center center blue;"+
         "background-size: 100%;"+
       "} "+
       "#tawkchat-status-icon {display:none} </style>")
   );
};

No soy dueño de ningún dominio de Tawk y esto funcionó para mí, por lo tanto, puede hacerlo incluso si no es del mismo dominio principal (a pesar del comentario de Jeremy Becker sobre la respuesta de Sam).

Este código usa JavaScript vainilla. Crea un nuevo <style>elemento. Establece el contenido de texto de ese elemento como una cadena que contiene el nuevo CSS. Y agrega ese elemento directamente a la cabeza del documento del iframe.

var iframe = document.getElementById('the-iframe');
var style = document.createElement('style');
style.textContent =
  'body {' +
  '  background-color: some-color;' +
  '  background-image: some-image;' +
  '}' 
;
iframe.contentDocument.head.appendChild(style);

Si tiene control de la página que aloja el iframe y la página del iframe, puede pasar un parámetro de consulta al iframe ...

Aquí hay un ejemplo para agregar una clase al iframe en función de si el sitio de alojamiento es móvil o no ...

Agregar iFrame:

var isMobile=$("mobile").length; //detect if page is mobile
var iFrameUrl ="https://myiframesite/?isMobile=" + isMobile; 

$(body).append("<div id='wrapper'><iframe src=''></iframe></div>");
$("#wrapper iframe").attr("src", iFrameUrl ); 

Dentro de iFrame:

//add mobile class if needed
var url = new URL(window.location.href);
var isMobile = url.searchParams.get("isMobile");
if(isMobile == "1") {
    $("body").addClass("mobile");
}

Tengo un blog y tuve muchos problemas para descubrir cómo cambiar el tamaño de mi esencia incrustada. El administrador de publicaciones solo le permite escribir texto, colocar imágenes e incrustar código HTML. El diseño del blog responde en sí mismo. Está construido con Wix. Sin embargo, el HTML incrustado no lo es. Leí mucho sobre cómo es imposible cambiar el tamaño de los componentes dentro del cuerpo de los iFrames generados. Entonces, aquí está mi sugerencia:

Si solo tiene un componente dentro de su iFrame, es decir, su esencia, solo puede cambiar su tamaño. Olvídate del iFrame.

Tuve problemas con viewport, diseños específicos para diferentes agentes de usuario y esto es lo que resolvió mi problema:

<script language="javascript" type="text/javascript" src="https://gist.github.com/roliveiravictor/447f994a82238247f83919e75e391c6f.js"></script>

<script language="javascript" type="text/javascript">

function windowSize() {
  let gist = document.querySelector('#gist92442763');

  let isMobile = {
    Android: function() {
        return /Android/i.test(navigator.userAgent)
    },
    BlackBerry: function() {
        return /BlackBerry/i.test(navigator.userAgent)
    },
    iOS: function() {
        return /iPhone|iPod/i.test(navigator.userAgent)
    },
    Opera: function() {
        return /Opera Mini/i.test(navigator.userAgent)
    },
    Windows: function() {
        return /IEMobile/i.test(navigator.userAgent) || /WPDesktop/i.test(navigator.userAgent)
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

  if(isMobile.any()) {
    gist.style.width = "36%";
    gist.style.WebkitOverflowScrolling = "touch"
    gist.style.position = "absolute"
  } else {
    gist.style.width = "auto !important";
  }
}

windowSize();

window.addEventListener('onresize', function() {
    windowSize();
});

</script>

<style type="text/css">

.gist-data {
  max-height: 300px;
}

.gist-meta {
  display: none;
}

</style>

La lógica es establecer css gist (o su componente) en función del agente de usuario. Asegúrese de identificar primero su componente, antes de aplicar al selector de consultas. Siéntase libre de ver cómo funciona la capacidad de respuesta .

Tal vez ha cambiado ahora, pero he usado una hoja de estilo separada con este elemento:

.feedEkList iframe
{
max-width: 435px!important;
width: 435px!important;
height: 320px!important;
}

para diseñar con éxito iframes de YouTube incrustados ... vea las publicaciones de blog en esta página .

proporcione al cuerpo de su página de iframe una identificación (o clase si lo desea)

<html>
<head></head>
<body id="myId">
</body>
</html>

luego, también dentro de la página del iframe, asigne un fondo a eso en CSS

#myId {
    background-color: white;
}