Como posso dimensionar o conteúdo de um iframe?

Como posso dimensionar o conteúdo de um iframe (no meu exemplo, é uma página HTML e não é um pop-up) em uma página do meu site?

Por exemplo, quero exibir o conteúdo que aparece no iframe em 80% do tamanho original.

A solução do Kip deve funcionar no Opera e Safari se você alterar o CSS para:

<style>
    #wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
    #frame { width: 800px; height: 520px; border: 1px solid black; }
    #frame {
        -ms-zoom: 0.75;
        -moz-transform: scale(0.75);
        -moz-transform-origin: 0 0;
        -o-transform: scale(0.75);
        -o-transform-origin: 0 0;
        -webkit-transform: scale(0.75);
        -webkit-transform-origin: 0 0;
    }
</style>

Você também pode especificar o estouro: oculto no #frame para impedir as barras de rolagem.

Encontrei uma solução que funciona no IE e Firefox (pelo menos nas versões atuais). No Safari / Chrome, o iframe é redimensionado para 75% do tamanho original, mas o conteúdo do iframe não é redimensionado. No Opera, isso não parece funcionar. Isso parece um pouco esotérico, por isso, se houver uma maneira melhor de fazê-lo, eu gostaria de receber sugestões.

<style>
#wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
#frame { width: 800px; height: 520px; border: 1px solid black; }
#frame { zoom: 0.75; -moz-transform: scale(0.75); -moz-transform-origin: 0 0; }
</style>

...

<p>Some text before the frame</p>
<div id="wrap">
<iframe id="frame" src="test2.html"></iframe>
</div>
<p>Some text after the frame</p>
</body>

Nota: eu tive que usar o wrapelemento para o Firefox. Por alguma razão, no Firefox, quando você reduz o objeto em 75%, ele ainda usa o tamanho original da imagem por motivos de layout. (Tente remover a div do código de exemplo acima e você verá o que quero dizer.)

Eu encontrei um pouco disso nesta pergunta .

Depois de lutar com isso por horas tentando fazê-lo funcionar no IE8, 9 e 10, eis o que funcionou para mim.

Este CSS simplificado funciona no FF 26, Chrome 32, Opera 18 e IE9 -11 a partir de 1/7/2014:

.wrap
{
    width: 320px;
    height: 192px;
    padding: 0;
    overflow: hidden;
}

.frame
{
    width: 1280px;
    height: 786px;
    border: 0;

    -ms-transform: scale(0.25);
    -moz-transform: scale(0.25);
    -o-transform: scale(0.25);
    -webkit-transform: scale(0.25);
    transform: scale(0.25);

    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

Para o IE8, defina a largura / altura para corresponder ao iframe e adicione -ms-zoom à div do contêiner .wrap:

.wrap
{
    width: 1280px; /* same size as frame */
    height: 768px;
    -ms-zoom: 0.25; /* for IE 8 ONLY */
}

Basta usar seu método favorito para detectar o condicionalmente o CSS apropriado, consulte Existe uma maneira de executar CSS condicional específico do navegador em um arquivo * .css? para algumas idéias.

O IE7 foi uma causa perdida, já que o -ms-zoom não existia até o IE8.

Aqui está o HTML real com o qual testei:

<div class="wrap">
   <iframe class="frame" src="http://time.is"></iframe>
</div>
<div class="wrap">
    <iframe class="frame" src="http://apple.com"></iframe>
</div>

http://jsfiddle.net/esassaman/PnWFY/

Acabei de testar e, para mim, nenhuma das outras soluções funcionou. Eu simplesmente tentei isso e funcionou perfeitamente no Firefox e Chrome, exatamente como eu esperava:

<div class='wrap'>
    <iframe ...></iframe>
</div>

e o css:

.wrap {
    width: 640px;
    height: 480px;
    overflow: hidden;
}

iframe {
    width: 76.92% !important;
    height: 76.92% !important;
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

Isso dimensiona todo o conteúdo em 30%. As porcentagens de largura / altura do curso precisam ser ajustadas de acordo (1 / scale_factor).

Seguimento da resposta do lxs : notei um problema em que ter as tags zoome --webkit-transformao mesmo tempo parece confundir o Chrome (versão 15.0.874.15), fazendo um efeito de zoom duplo. Consegui solucionar o problema substituindo zoompor -ms-zoom(direcionado apenas para o IE), deixando o Chrome para fazer uso apenas da --webkit-transformtag e isso esclareceu as coisas.

Você não precisa agrupar o iframe com uma tag adicional. Apenas certifique-se de aumentar a largura e a altura do iframe na mesma quantidade que você reduz o tamanho do iframe.

por exemplo, para dimensionar o conteúdo de iframe para 80%:

#frame { /* Example size! */
    height: 400px; /* original height */
    width: 100%; /* original width */
}
#frame {
    height: 500px; /* new height (400 * (1/0.8) ) */
    width: 125%; /* new width (100 * (1/0.8) )*/

    transform: scale(0.8); 
    transform-origin: 0 0;
}

Basicamente, para obter o mesmo tamanho de iframe, é necessário dimensionar as dimensões.

html {zoom: 0.4;}? -)

Pensei em compartilhar o que descobri, usando muito do que foi dado acima. Eu não verifiquei o Chrome, mas funciona no IE, Firefox e Safari, até onde eu sei.

As compensações específicas e o fator de zoom neste exemplo funcionaram para reduzir e centralizar dois sites em iframes para as guias do Facebook (largura de 810px).

Os dois sites utilizados foram um site wordpress e uma rede ning. Eu não sou muito bom com html, então isso provavelmente poderia ter sido feito melhor, mas o resultado parece bom.

<style>
    #wrap { width: 1620px; height: 3500px; padding: 0; position:relative; left:-100px; top:0px; overflow: hidden; }
    #frame { width: 1620px; height: 3500px; position:relative; left:-65px; top:0px; }
    #frame { -ms-zoom: 0.7; -moz-transform: scale(0.7); -moz-transform-origin: 0px 0; -o-transform: scale(0.7); -o-transform-origin: 0 0; -webkit-transform: scale(0.7); -webkit-transform-origin: 0 0; }
</style>
<div id="wrap">
    <iframe id="frame" src="http://www.example.com"></iframe>
</div>

Se você quiser que o iframe e seu conteúdo sejam redimensionados quando a janela for redimensionada, defina o seguinte para o evento de redimensionamento da janela, bem como para o evento de iframes onload.

function()
{
    var _wrapWidth=$('#wrap').width();
    var _frameWidth=$($('#frame')[0].contentDocument).width();

    if(!this.contentLoaded)
      this.initialWidth=_frameWidth;
    this.contentLoaded=true;
    var frame=$('#frame')[0];

    var percent=_wrapWidth/this.initialWidth;

    frame.style.width=100.0/percent+"%";
    frame.style.height=100.0/percent+"%";

    frame.style.zoom=percent;
    frame.style.webkitTransform='scale('+percent+')';
    frame.style.webkitTransformOrigin='top left';
    frame.style.MozTransform='scale('+percent+')';
    frame.style.MozTransformOrigin='top left';
    frame.style.oTransform='scale('+percent+')';
    frame.style.oTransformOrigin='top left';
  };

Isso fará com que o iframe e seu conteúdo sejam dimensionados para 100% de largura da div de quebra automática (ou a porcentagem que você desejar). Como um bônus adicional, você não precisa definir o css do quadro como valores codificados, pois todos serão definidos dinamicamente; você só precisará se preocupar com a forma como deseja que a div wrap seja exibida.

Eu testei isso e funciona no chrome, IE11 e firefox.

Acho que você pode fazer isso calculando a altura e a largura desejadas com javascript (via document.body.clientWidth etc.) e injetando o iframe no seu HTML assim:

var elemento = document.getElementById ("myid");
element.innerHTML + = "<iframe src = 'http: //www.google.com' height = '200' width = '" + document.body.clientWidth * 0.8 + "' />";

Eu não testei isso no IE6, mas parece funcionar com os bons :)

Para aqueles que estão com problemas para que isso funcione no IE, é útil usar -ms-zoomcomo sugerido abaixo e usar a função de zoom na #wrapdiv, não o iframeID. Na minha experiência, com a zoomfunção tentando escalar a div iframe de#frame , ela escalaria o tamanho do iframe e não o conteúdo nele (que é o que você procura).

Se parece com isso. Funciona para mim no IE8, Chrome e FF.

#wrap {
  overflow: hidden;
  position: relative;
  width:800px;
  height:850px;
  -ms-zoom: 0.75;
}

Esta foi a minha solução em uma página com largura de 890px

#frame { 
overflow: hidden;
position: relative;
width:1044px;
height:1600px;
-ms-zoom: 0.85;
-moz-transform: scale(0.85);
-moz-transform-origin: 0px 0;
-o-transform: scale(0.85);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.85);
-webkit-transform-origin: 0 0; 

}

A solução #wrap #frame funciona bem, desde que os números em #wrap sejam #frame vezes o fator de escala. Ele mostra apenas a parte do quadro reduzido. Você pode vê-lo aqui diminuindo a escala de sites e colocando-o em um formulário do tipo pinterest (com o plugin woodmark jQuery):

http://www.genautica.com/sandbox/woodmark-index.html

Portanto, provavelmente não é a melhor solução, mas parece funcionar bem.

<IFRAME ID=myframe SRC=.... ></IFRAME>

<SCRIPT>
    window.onload = function(){document.getElementById('myframe').contentWindow.document.body.style = 'zoom:50%;';};
</SCRIPT>

Obviamente, não tentando consertar o pai, basta adicionar o estilo "zoom: 50%" ao corpo do filho com um pouco de javascript.

Talvez pudesse definir o estilo do elemento "HTML", mas não tentou isso.

Se o seu html estiver estilizado com css, você provavelmente poderá vincular folhas de estilo diferentes para tamanhos diferentes.

Eu não acho que o HTML tenha essa funcionalidade. A única coisa que posso imaginar que faria o truque é fazer algum processamento no servidor. Talvez você possa obter uma imagem instantânea da página da web que deseja exibir, dimensioná-la no servidor e servi-la ao cliente. Esta seria uma página não interativa, no entanto. (talvez um mapa de imagem possa ter o link, mas ainda assim.)

Outra idéia seria ter um componente do lado do servidor que alterasse o HTML. Como o recurso de zoom do firefox 2.0. é claro que isso não é um zoom perfeito, mas é melhor que nada.

Fora isso, estou sem idéias.

Como disse, duvido que você consiga.
Talvez você possa dimensionar pelo menos o próprio texto, definindo um estilo font-size: 80%;.
Não testado, não tenho certeza de que funciona e não redimensionará caixas ou imagens.