Substituir o estilo do corpo pelo conteúdo em um iframe

Como posso controlar a imagem de plano de fundo e a cor de um elemento do corpo em um iframe? Observe que o elemento do corpo incorporado possui uma classe e o iframede uma página que faz parte do meu site.

A razão pela qual eu preciso disso é que meu site tem um plano de fundo preto atribuído ao corpo e, em seguida, um plano de fundo branco atribuído a divs que contêm texto. Um editor WYSIWYG usa um iframepara incorporar conteúdo ao editar, mas ele não inclui a div, portanto, o texto é muito difícil de ler.

O corpo do iframequando no editor tem uma classe que não é usada em nenhum outro lugar, então estou assumindo que isso foi colocado lá para que problemas como esse pudessem ser resolvidos. No entanto, quando aplico estilos, class.bodyeles não substituem os estilos aplicados ao corpo. O estranho é que os estilos aparecem no Firebug, então não faço ideia do que está acontecendo!

obrigado

ATUALIZAÇÃO - Tentei a solução do @ mikeq de adicionar um estilo à classe que é a classe do corpo. Isso não funciona quando adicionado à folha de estilo da página principal, mas funciona quando adicionado ao Firebug. Estou assumindo que isso ocorre porque o Firebug é aplicado a todos os elementos da página, enquanto o CSS não é aplicado dentro de iframes. Isso significa que adicionar o css após o carregamento da janela com JavaScript funcionaria?

Um iframe é um "buraco" na sua página que exibe outra página da web dentro dele. O conteúdo do iframe não está em nenhuma forma ou parte da sua página pai.

Como outros já declararam, suas opções são:

• forneça ao arquivo que está sendo carregado no iframe o CSS necessário
• se o arquivo no iframe for do mesmo domínio que seu pai, você poderá acessar o DOM do documento no iframe pelo pai.

O abaixo funciona apenas se o conteúdo do iframe for do mesmo domínio pai.

O seguinte script jquery funciona para mim. Testado no Chrome e IE8. O iframe interno faz referência a uma página que está no mesmo domínio que a página pai.

Nesse caso em particular, estou ocultando um elemento com uma classe específica no iframe interno.

Basicamente, você apenas acrescenta um elemento 'style' à 'cabeça' do iframe interno.

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

Você não pode alterar o estilo de uma página exibida em um iframe, a menos que tenha acesso direto e, portanto, seja proprietário dos arquivos html e / ou css de origem.

Isso é para interromper o XSS (Cross Site Scripting)

Um iframetem outro escopo; portanto, você não pode acessá-lo para estilizar ou alterar seu conteúdo com javascript.

É basicamente "outra página".

A única coisa que você pode fazer é editar seu próprio CSS, porque com o seu CSS global você não pode fazer nada.

Substituir outro iframe CSS do domínio

Usando parte da resposta do SimpleSam5 , consegui isso com alguns iframes de bate-papo do Tawk (a interface de personalização é boa, mas eu precisava de mais personalizações).

Nesse iframe específico que aparece em dispositivos móveis, eu precisava ocultar o ícone padrão e colocar uma das minhas imagens de plano de fundo. Eu fiz o seguinte:

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

Eu não possuo nenhum domínio de Tawk e isso funcionou para mim; portanto, você pode fazer isso mesmo que não seja do mesmo domínio pai (apesar do comentário de Jeremy Becker sobre a resposta de Sam).

Este código usa JavaScript vanilla. Cria um novo <style>elemento. Ele define o conteúdo de texto desse elemento como uma sequência que contém o novo CSS. E anexa esse elemento diretamente ao cabeçalho do 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);

Se você tiver o controle da página que hospeda o iframe e a página do iframe, poderá passar um parâmetro de consulta para o iframe ...

Aqui está um exemplo para adicionar uma classe ao iframe com base no fato de o site de hospedagem ser ou não móvel ...

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

Eu tenho um blog e tive muitos problemas para descobrir como redimensionar minha essência incorporada. O Post Manager permite apenas escrever texto, colocar imagens e incorporar código HTML. O layout do blog é responsivo em si. É construído com o Wix. No entanto, o HTML incorporado não é. Eu li muito sobre como é impossível redimensionar componentes dentro do corpo dos iFrames gerados. Então, aqui está a minha sugestão:

Se você tiver apenas um componente dentro do seu iFrame, ou seja, sua essência, poderá redimensionar apenas a essência. Esqueça o iFrame.

Tive problemas com a viewport, layouts específicos para diferentes agentes do usuário e foi isso que resolveu o meu 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>

A lógica é definir css de gist (ou seu componente) com base no agente do usuário. Certifique-se de identificar seu componente primeiro, antes de aplicar ao seletor de consultas. Sinta-se livre para ver como a capacidade de resposta está funcionando .

Talvez tenha mudado agora, mas usei uma folha de estilo separada com este elemento:

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

para estilizar com êxito iframes do youtube incorporados ... consulte as postagens do blog nesta página .

forneça ao corpo da sua página iframe um ID (ou classe, se desejar)

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

depois, também na página do iframe, atribua um segundo plano ao CSS

#myId {
    background-color: white;
}