0

Estou precisando alterar o CSS de um iFrame, porém pesquisando aqui, descobri que não é tão simples assim, logo, vi que o iFrame que eu desejo estilizar, tem um <link rel="stylesheet" href="styles/report.css" /> e é nesse arquivo report.css que está as estilizações que eu gostaria de trocar, é possivel via JS eu trocar esse href e direcionar para o meu arquivo CSS?

Caso não seja possível, existe alguma forma de eu alterar o CSS de um elemento que está dentro do iFrame? Alterando pelo inspecionar elemento do navegador dá certo, mas logicamente, eu precisaria de algo fixo. Pensei em trocar a classe do elemento com jQuery, mas não funcionou, pensei em sobrescrever o CSS do elemento usando CSS e o !important, mas aparentemente também não funcionou.

2 Respostas 2

1

O iFrame não é um elemento normal: ele carrega outra página, que só é visualizada numa sessão da página mãe. Mas fora essa "janela" que é apenas para visualização, são páginas independentes, tão separadas uma da outra como se estivessem em abas diferentes do navegador. E isso é assim de propósito, até mesmo por questões de segurança: imagine você ter uma página em que o conteúdo visível é 100% um iframe, onde você abre o site de um banco ou de comércio eletrônico. Se o javascript da página de fora tivesse acesso aos dados do iframe, você poderia capturar qualquer dado digitado nos formulários lá dentro - inclusive senhas, números de cartão, etc...

Se você precisar apenas da informação textual - e não do Javascript rodando na página dentro do iframe, o que é possível fazer é recuperar, através de Javascript, o conteúdo em HTML, com uma requisição GET, montar o DOM da página alvo, e copiar os elementos desejados para dentro da sua página - e aí você aplica o estilo que quiser. Isso é bem mais complicado, claro, e, se o conteúdo da página em si depender de javascript, pode nem ser possível de ser feito.

É interessante lembrar que iframes e frames foram elementos inventados no HTML antes de técnicas como Ajax serem possíveis, e antes mesmo de aplicações web com conteúdo dinâmico serem populares - os Frames eram uma forma de juntar páginas estáticas em HTML e re-usar o topo e o lado esquerdo da página para navegação. Os iframes permanecem uma forma mais ou menos popular de colocar outra página dentro de uma página "mãe", mas podem fazer apenas isso: inserir a outra página como um todo.

0

Tenta assim, usa esse script depois que o iframe foi carregado

$('link[href="styles/report.css"]').attr("href", "seucss.css");

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .