css - obtener - Anular el estilo del cuerpo para el contenido en un iframe

insertar iframe css

Question

¿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 el iframe pertenece a una página que forma parte de mi sitio.

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

El cuerpo del iframe cuando está en el editor tiene una clase que no se usa en ningún otro lado, así que supongo que se puso allí para que se puedan resolver problemas como este. Sin embargo, cuando aplico estilos a 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 intentado la solución @ mikeq de agregar un estilo a la clase que es la clase del cuerpo. Esto no funciona cuando se agrega a la hoja de estilos 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 en la página, mientras que el CSS no se aplica dentro de los iframes. ¿Esto significa que agregar el CSS después de cargar la ventana con JavaScript funcionaría?

Answer 1

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 los dispositivos móviles, necesitaba ocultar el icono 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 poseo ningún dominio de Tawk y esto funcionó para mí, por lo tanto puedes hacer esto incluso si no es del mismo dominio parental (a pesar del comentario de Jeremy Becker sobre la respuesta de Sam).

Answer 2

Este código usa JavaScript vanidoso. Crea un nuevo elemento <style> . 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 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);

Answer 3

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

Esto es para detener XSS (Cross Site Scripting)

Answer 4

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

Answer 5

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

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

para diseñar correctamente los iframes de youtube incrustados ... vea las publicaciones de blog en esta página .

Answer 6

Un iframe tiene otro ámbito, 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.

Answer 7

Un iframe es un ''hoyo'' en su página que muestra otra página web dentro de él. El contenido del iframe no está en ninguna forma o forma parte de su página principal.

Como otros han declarado, sus opciones son:

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

Answer 8

dale al cuerpo de tu página de iframe una identificación (o clase si lo deseas)

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

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

#myId {
    background-color: white;
}

Answer 9

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