Usando CSS para afetar o estilo div dentro do iframe

Respostas:

117

Você precisa de JavaScript. É o mesmo que fazê-lo na página pai, exceto que você deve prefixar seu comando JavaScript com o nome do iframe.

Lembre-se de que a mesma política de origem se aplica; portanto, você só pode fazer isso com um elemento iframe proveniente do seu próprio servidor.

Eu uso a estrutura Prototype para facilitar:

frame1.$('mydiv').style.border = '1px solid #000000'

ou

frame1.$('mydiv').addClassName('withborder')
Diodeus - James MacFarlane
fonte
2
veja minha pergunta é similar stackoverflow.com/questions/1962707/… mas não podemos mudar de estilo se o quadro for de outro servidor?
Jitendra Vyas
16
Está correto. O conteúdo do Iframe está sujeito à mesma política de domínio. Se for do seu domínio, você poderá controlá-lo; caso contrário, estará bloqueado. Isso evita todos os tipos de seqüestro de páginas baseadas em Iframe.
Diodeus - James MacFarlane
2
Não é exatamente uma solução "apenas CSS", mas é suficiente para mim. +1
Nicu Surdu
2
Isso não é CSS.
stramin
103

Em suma, não.

Você não pode aplicar CSS ao HTML carregado em um iframe, a menos que tenha controle sobre a página carregada no iframe devido a restrições de recursos entre domínios.

mmattax
fonte
55
Isso é verdade, mas realmente não ajuda as pessoas a dar um exemplo de como
Simon Dragsbæk
isso será lançado em 2018? Lembro que eu costumava configurar o estilo do iframe vindo de fora. Tentei aplicar CSS para iframe que proferida pelo roteiro, mas não stil work.l
Võ Minh
46

Sim. Dê uma olhada neste outro tópico para obter detalhes: Como aplicar CSS ao iframe?

var cssLink = document.createElement("link");
cssLink.href = "style.css";  
cssLink.rel = "stylesheet";  
cssLink.type = "text/css";  
frames['frame1'].document.body.appendChild(cssLink); 
Eugene Rosenfeld
fonte
4
frame1 é o id do iframe ??
Toni Michel Caubet
5
Sim, frame1 é o ID do iframe.
Eugene Rosenfeld
3
Isso não é CSS.
stramin
4
isso não podemos fazer se estamos carregando um domínio diferente no iframe.
Sunith Saga
frame1é o nome do iframe, não o ID
joseantgv
14

Você pode recuperar o conteúdo de um iframeprimeiro e, em seguida, usar jQueryseletores contra eles, como de costume.

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

Boa sorte!

Riyaz Hameed
fonte
11
não funciona: DOMException não capturado: falha ao ler a propriedade 'contentDocument' de 'HTMLIFrameElement': impediu que um quadro com origem " HOST " acesse um quadro de origem cruzada.
tubbo
@tubbo, no seu caso, você não pode incorporar sites não autorizados impedidos de XSS. Isto é apenas para aqueles que procuram seus próprios problemas, não hackers: p
Riyaz Hameed
10

A resposta rápida é: não, desculpe.

Não é possível usar apenas CSS. Basicamente, você precisa ter controle sobre o conteúdo do iframe para estilizá-lo. Existem métodos que usam javascript ou sua linguagem preferida da Web (sobre a qual já li um pouco, mas não estou familiarizado) para inserir dinamicamente alguns estilos necessários, mas você precisaria de controle direto sobre o conteúdo do iframe, o que parece como você não tem.

Justin Lucente
fonte
8

Use Jquery e aguarde até que a fonte seja carregada. Foi assim que consegui (Intervalo angular usado, você pode usar o método setInterval do 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);
Priyank Gupta
fonte
1
por que você não usa o evento carregado iframe?
ProllyGeek
3

provavelmente não do jeito que você está pensando. o iframe também precisaria <link>no arquivo css. E você não pode fazer isso nem com javascript se estiver em um domínio diferente.

Al W
fonte
Você pode dar um exemplo de como isso pode ser feito? Você quer dizer algo assim <iframe src="/source" link=css-stylesheet:"/css.css">?
Ant
3

Aparentemente, isso pode ser feito via jQuery:

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

https://stackoverflow.com/a/13959836/1625795

adamj
fonte
3
Você não pode mais usar isso por causa da mesma política de origem no navegador Chrome. A mensagem de erro:Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin **** from accessing a cross-origin frame.
Mohammad AlBanna 13/06
@adamj, podemos alterar a folha de estilo de substituição do elemento iframe? se sim, por favor, adicione script.
Super Model
2

Uma espécie de maneira hack-ish de fazer as coisas é como Eugene disse. Acabei seguindo o código dele e ligando para o meu CSS personalizado para a página. O problema para mim foi que, com uma linha do tempo do twitter, você precisa fazer algumas correções no twitter para substituir um pouco o código. Agora, temos uma linha do tempo contínua com o nosso css, fonte IE Maior, altura da linha adequada e tornando a barra de rolagem oculta por alturas maiores que seus limites.

var c = document.createElement('link');
setTimeout(frames[0].document.body.appendChild(c),500); // Mileage varies by connection. Bump 500 a bit higher if necessary
Cole Busby
fonte
1

Basta adicionar isso e tudo funciona bem:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
Wahab Ahmed
fonte
Não tenho certeza se esta é a resposta correta para a pergunta, mas foi uma ótima solução para redimensionar o formulário do Google para a largura do dispositivo, muito obrigado!
shiftyscales
0

Sim, é possível, embora complicado. Você precisaria imprimir / ecoar o HTML da página no corpo da página e aplicar uma função de alteração de regra CSS. Usando os mesmos exemplos fornecidos acima, você usaria essencialmente um método de análise para encontrar as divs na página e, em seguida, aplicar o CSS a ela e, em seguida, reimprimi-lo / ecoá-lo para o usuário final. Eu não preciso disso, então não quero codificar essa função em todos os itens no CSS de outra página da web apenas para se inscrever.

Referências:

eric wiedemann
fonte
A pergunta especificamente "usando apenas CSS". Com isso em mente, sua resposta está errada.
Serj Sagan
Isso não é CSS.
stramin
0

Combinando as diferentes soluções, foi isso que funcionou para mim.

$(document).ready(function () {
    $('iframe').on('load', function() {
        $("iframe").contents().find("#back-link").css("display", "none");
    }); 
});
Rami Alloush
fonte
-1

Não é possível do lado do cliente. Um erro de javascript será gerado "Erro: permissão negada para acessar a propriedade" documento "", pois o Iframe não faz parte do seu domínio. A única solução é buscar a página no código do servidor e alterar o CSS necessário.

Chdid
fonte
2
Esta resposta está correta em seu conteúdo, mas está relacionada ao JavaScript, enquanto a pergunta está relacionada ao CSS. A resposta pode ser que você precisa usar JavaScript, mas não diz isso. A resposta também pressupõe que o conteúdo do iFrame é de um domínio diferente, o que nem sempre é o caso. Por fim, a mensagem exata variará de navegador para navegador.
Pwdst