How to edit the CSS of an iframe?

Question

I need to put a iFrame on my website using the following code:

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

How can I edit the CSS of the content that is displayed?

Wanted to change some colors, backgrounds, etc...

You could add a new CSS sheet?

Or add the CSS Incorporado same? Ex:

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

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

Answer 1

I was able to do only with jquery using a proxy, now just work with css and script to work tabs, but this I leave with you:

jquery:

$('#divframe').load(
    'http://www.corsproxy.com/' +
    'www.cptec.inpe.br/widget/widget.php?p=3819&w=h&c=474647&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 with tabs script working: http://jsfiddle.net/jaderw/kuLdmnm4/2/

---

Alternative with own proxy in PHP:

proxy.php (with just that content, and nothing else)

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

The content below should be in another file, together with css and everything else... ex file: html test.

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>

Answer 2

By definition, iframe allows you to open an external document, whether on the same server or on others. Some javascript solutions can help you do what you want, but only if it’s a document on the same server.

So in principle the answer is no.

But, you can create a copy of the external page on your server using PHP:

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

And apply the CSS styles you want to the returned string, you can even create a "version" of the original page on your server, with your own styles and scripts.