2

Preciso colocar um iFrame em meu site que utiliza o seguinte código:

<iframe allowtransparency="true" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no" src="http://www.cptec.inpe.br/widget/widget.php?p=3819&amp;w=h&amp;c=474647&amp;f=ffffff" height="180px" width="211px"></iframe>

Como posso fazer para editar o CSS do conteúdo que é exibido?

Queria mudar algumas cores, backgrounds, etc...

Teria como adicionar uma nova folha CSS?

Ou adicionar o CSS Incorporado mesmo? Ex:

    <style rel="stylesheet" type="text/css">
    .classe { background: #000;
    }    
    #id { background: #FFF;
    }
    </style>

Link do iFrame: http://www.cptec.inpe.br/widget/widget.php?p=3819&w=h&c=474647&f=ffffff

6
  • 2
    O iFrame esta no mesmo dominio que o seu site?
    – Sergio
    7/08/2014 às 7:25
  • 1
    Não conheço as implicações de segurança do CSS, mas a princípio eu diria que você não pode modificar nada no conteúdo de um iframe que não pertença à mesma origem (esquema, domínio e talvez porta) da sua página principal. O máximo que você pode fazer - se o browser der suporte - é colocar o iframe num sandbox, bloqueando Ajax, JavaScript, etc (nesse caso, para página principal se proteger contra conteúdo malicioso embutido). Mas modificações arbitrárias, receio ser impossível, e com boa razão.
    – mgibsonbr
    7/08/2014 às 8:19
  • 1
    @mgibsonbr, removi a resposta... pensei que fosse possivel 7/08/2014 às 9:34
  • 1
    Se você criar um tipo de proxy carregando o conteúdo usando o curl, você conseguiria modificar o que quisesse antes de imprimir... 7/08/2014 às 10:25
  • Veja se isto pode ajudá-lo stackoverflow.com/questions/217776/how-to-apply-css-to-iframe 7/08/2014 às 10:59

2 Respostas 2

3

Consegui fazer apenas com jquery usando um proxy, agora basta trabalhar com o css e o script para funcionar as tabs, mas isso deixo com você:

jquery:

$('#divframe').load(
    'http://www.corsproxy.com/' +
    'www.cptec.inpe.br/widget/widget.php?p=3819&amp;w=h&amp;c=474647&amp;f=ffffff .tabtop',  function() {
         $('#divframe').html( $('#divframe').html().replace(new RegExp('src="', 'g'),'src="http://www.cptec.inpe.br/widget/') );
    });

HTML:

<div id="divframe"></div>

jsfiddle: http://jsfiddle.net/jaderw/kuLdmnm4/

EDIT: jsfiddle com o script das tabs funcionando: http://jsfiddle.net/jaderw/kuLdmnm4/2/


Alternativa com proxy próprio em PHP:

proxy.php (com apenas esse conteúdo, e mais nada)

<?php
$cache_file = 'proxy_cache.html'; // nome do arquivo para salvar cache

if (!@file_exists($cache_file) || (time() - @filemtime($cache_file) > (60 * 60 * 6))) { // verificar se o cache expirou e fazer uma nova requisição ao cptec.inpe.br
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, "http://www.cptec.inpe.br/widget/widget.php?p=3819&amp;w=h&amp;c=474647&amp;f=ffffff");
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    $retorno = str_replace('src="','src="http://www.cptec.inpe.br/widget/',curl_exec($ch)); // adicionar o endereço absoluto a todos os src
    curl_close($ch);
    file_put_contents($cache_file, $retorno); // salvar conteudo no arquivo de cache
} else { // cache não expirou abrir o conteudo do arquivo sem nova requisição ao cptec.inpe.br
    $retorno = file_get_contents($cache_file);
}

echo $retorno; // imprimir o conteudo
?> 

O conteúdo abaixo deve estar em outro arquivo, juntamente com o css e tudo mais... arquivo ex: teste.html

jquery:

$('#divframe').load(
    'proxy.php .tabtop',  function() {
         $('#divframe .tab_content').hide();
         $('#divframe .tabs li:first').addClass('active');
         $('#divframe .tab_content:first').show();
         $('#divframe .tabs li').click(function(){
             $('#divframe .tabs li').removeClass('active');
             $(this).addClass('active');
             $('#divframe .tab_content').hide();
             $($(this).children('a').attr('href')).show();
         });
    });

HTML:

<div id="divframe"></div>
16
  • 1
    Para não precisar fazer uma requisição ao cptec.inpe.br a cada pageview no seu site... coloquei a atualização a cada 6 horas. 8/08/2014 às 12:37
  • 1
    @AlexandreLopes Aqui pra mim o proxy.php é instantâneo, dá só uma piscadinha, e também estou rodando no localhost... 8/08/2014 às 13:14
  • 1
    @AlexandreLopes Verifique se ele esta criando o arquivo de cache, pois se pegar no cache, deve ser mais rápido ainda... 8/08/2014 às 13:18
  • 1
    @AlexandreLopes tem coisa errada no seu iframe.php pois ele esta abrindo todo o conteúdo que deveria abrir apenas no proxy.php, depois no final tem uma requisição ajax, chamando por um proxy.php que não existe no servidor... acho que você não entendeu como deveria ser... 8/08/2014 às 14:06
  • 1
    Leia com atenção a resposta, crie o arquivo proxy.php para ser chamado pelo .load e use esse arquivo como base para testar, corrija apenas a chamada do jquery <script src="js/jquery-1.11.1.min.js"></script> para apontar para um local/arquivo correto. 8/08/2014 às 15:29
1

Por definição, o iframe permite abrir um documento externo, seja ele no mesmo servidor ou em outros. Algumas soluções em javascript podem ajudar a fazer o que você quer, mas apenas se for um documento no mesmo servidor.

Portanto, em princípio a resposta é não.

Mas, você pode criar uma cópia da página externa no seu servidor usando PHP:

file_get_contents(/* string: url da página */)

E aplicar os estilos CSS que quiser na string retornada, podendo criar até uma "versão" da página original no seu servidor, com seus próprios estilos e scripts.

6
  • Você poderia ser mais específico? Não sou muito bom com PHP, o ideal seria você publicar um código mais completo, eu não sei o que colocar em /* string: url da página */ 7/08/2014 às 20:37
  • 1
    Não funciona com JS e CSS relativos como os do IFRAME 7/08/2014 às 21:00
  • Como assim @PapaCharlie ? Queria tipo usar o CSS Incorporado mesmo. 7/08/2014 às 21:57
  • 1
    o widget precisa de JS para mudar as abas, CSS para imagens e afins... Pelo que vi do widget, os caminhos são relativos, você precisaria dos caminhos absolutos 7/08/2014 às 22:11
  • 1
    Faça um teste: file_get_contents( 'http://www.cptec.inpe.br/widget/widget.php?p=3819&w=h&c=474647&f=ffffff' ) 7/08/2014 às 22:13

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 .