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

165

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?

jd6699
fonte
1
Possível duplicata de Como aplicar CSS ao iframe?
2540625
Embora não seja possível tocar em nada em um iframe, carregar esse URL por Ajax em uma <div>lata pode às vezes ser uma solução alternativa (se o CORS-Header permitir isso) ... (e "desinfetar" os dados carregados por regexp no diretório . maneira Sim, todos hacky ...)
Frank Nocke
Você pode usar javascript se os domínios da página corresponderem, mas por que não colocar um bloco de estilo no HTML da sua página interna para substituir as cores que você deseja alterar? Basta adicionar mais seletores em sua substituição ou usar importantes! se tudo mais falhar, para substituir os estilos de cor você quer apenas em que uma página ...
OG Sean

Respostas:

111

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.
DA.
fonte
251

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>"));
});
SimpleSam5
fonte
4
@ SimpleSam5 Você pode fornecer a alternativa Javascript (sem usar o Jquery)?
precisa saber é o seguinte
1
@sincerekamal Aqui está o código sem a necessidade do jQuery: jsfiddle.net/9g9wkpon Você só precisa saber que as propriedades CSS hifenizadas são escritas no camelCase em JavaScript, como no meu exemplo. :)
Dennis98
2
jquery.js? ver = 1.12.4: 2 DOMException não capturado: falha ao ler a propriedade 'contentDocument' de 'HTMLIFrameElement': impediu que um quadro com origem " xxxxxxxxx.com " acesse um quadro de origem cruzada.
Alex Stanese
2
@AlexStanese como afirma jeremy, isso só funciona se a página iframe vier do mesmo servidor que a página pai ... o que normalmente significa que você não precisa se preocupar com javascript de qualquer maneira ... basta adicionar o CSS à outra página em primeiro lugar.
DA.
@KamalakannanJ você nem precisa usar o Javascript. Basta editar a página que está no iFrame e colocar o CSS lá.
DA.
25

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)

Myles Grey
fonte
O que você quer dizer com 'acesso direto'? A página no iframe é do meu site, é todo um domínio.
Jd6699
2
Bem, você precisará alterar o arquivo de origem no seu site (não é possível modificar nenhum conteúdo em um iframe). Portanto, se o iframe estiver apontando para mysite.com/test.html, será necessário modificar o test.html diretamente. .
Myles Grey
1
Não podes? Sob as condições, o OP diz que você pode. Por exemplo, o seu interior URL iframe é o mesmo que o seu site pai para que ele deve ser capaz de acessar o ok DOM com qualquer sabor de javascript você gosta ...
OG Sean
@Myles Gray Wrong. Você pode modificar o conteúdo em um iframe a partir da página pai, se estiver no mesmo domínio, com JavaScript e CSS.
Kevin M
8

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.

Alessandro Vendruscolo
fonte
Sim, você pode, com javascript. Observe que funciona melhor com o URL iframe e o URL pai que compartilham o mesmo domínio. Mas acho que você está certo ao apontar que isso pode ser feito apenas com CSS na página dentro do iframe.
OG Sean
8

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

CPHPython
fonte
18
Suspeito que isso só funcione porque as pessoas em Tawk o permitiram explicitamente.
27517 Lawyerson
@CPHPython Talvez você possa me ajudar. Veja isto: stackoverflow.com/questions/60923168/…
Success Man
7

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);
2540625
fonte
7
Blocked a frame with origin xxxxxxxxx from accessing a cross-origin frame.Eu tenho medo que não vai funcionar #
066 Mike
1

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");
}
Ben
fonte
Talvez você possa me ajudar. Veja isto: stackoverflow.com/questions/60923168/…
Success Man
0

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 .

Victor R. Oliveira
fonte
-3

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 .

Tim Jackson
fonte
4
Embora esse link possa responder à pergunta, é melhor incluir aqui as partes essenciais da resposta e fornecer o link para referência. As respostas somente para links podem se tornar inválidas se a página vinculada for alterada.
Shaiful Islam
4
Isso se aplica apenas ao próprio elemento iFrame - a pergunta é feita especificamente sobre o conteúdo do iFrame, que atualmente não é possível alterar apenas o CSS.
Pwdst
@ ShaifulIslam, que é precisamente o que aconteceu. Rending Tims responde inútil.
precisa saber é o seguinte
-23

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;
}
mikeq
fonte
Isso é estranho. Sua solução funciona para mim quando a adiciono à página com o firebug, mas não funciona se estiver no arquivo css normal da página. Isso pode fazer parte do seu comentário "assumindo que a página do iFrame é sua para editar"? Eu não entendi o que você quis dizer com isso. Graças
jd6699
Quero dizer com isso, a página que você está carregando no iFrame é do seu site e está sob seu controle? ou é de um site externo que você não pode editar a fonte para incluir esse ID / classe.
mikeq
É do meu site, mas como é feito pelo editor, não será fácil alterar a marca que é puxada.
jd6699
ps Eu não quis dizer adicionar id = "myId" à sua página principal, mas à página dentro do iFrame. Dessa forma, você pode segmentar o corpo da página do iFrame com um estilo diferente da sua página principal. Você também está referenciando o arquivo CSS nas suas páginas do iFrame também não é. Você precisa tratar a página carregada no iFrame como uma página completamente independente. Se você carregar apenas essa página em um navegador, ele tem o estilo correto?
mikeq
Na verdade, não tenho certeza de onde a 'página' está, pois não é a página inteira que o editor usa. Obrigado pela sua ajuda, acho que entendo como tudo isso funciona noe.
Jd6699