Usando CSS para afetar o estilo div dentro do iframe

É possível alterar os estilos de uma div que reside dentro de um iframe na página usando apenas CSS?

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

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.

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

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!

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.

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

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.

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

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

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">

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:

• Imprimindo conteúdo de IFRAME
• Acesso e impressão de código-fonte HTML usando PHP ou JavaScript
• http://www.w3schools.com/js/js_htmldom_html.asp
• http://www.w3schools.com/js/js_htmldom_css.asp

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

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.