¿Cómo puedo escalar el contenido de un iframe?

¿Cómo puedo escalar el contenido de un iframe (en mi ejemplo es una página HTML y no una ventana emergente) en una página de mi sitio web?

Por ejemplo, quiero mostrar el contenido que aparece en el iframe al 80% del tamaño original.

La solución de Kip debería funcionar en Opera y Safari si cambia el CSS a:

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

También es posible que desee especificar desbordamiento: oculto en #frame para evitar barras de desplazamiento.

Encontré una solución que funciona en IE y Firefox (al menos en las versiones actuales). En Safari / Chrome, el iframe se redimensiona al 75% de su tamaño original, pero el contenido dentro del iframe no se escala en absoluto. En Opera, esto no parece funcionar. Esto se siente un poco esotérico, así que si hay una mejor manera de hacerlo, agradecería cualquier sugerencia.

<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: tuve que usar el wrapelemento para Firefox. Por alguna razón, en Firefox cuando reduce el objeto en un 75%, todavía usa el tamaño original de la imagen por razones de diseño. (Intente eliminar el div del código de muestra anterior y verá lo que quiero decir).

Encontré algo de esto en esta pregunta .

Después de luchar con esto durante horas tratando de que funcione en IE8, 9 y 10, esto es lo que funcionó para mí.

Este CSS simplificado funciona en FF 26, Chrome 32, Opera 18 e IE9 -11 a partir del 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 IE8, establezca el ancho / alto para que coincida con el iframe y agregue -ms-zoom al contenedor .wrap div:

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

Simplemente use su método favorito para que el buscador de navegador incluya condicionalmente el CSS apropiado, consulte ¿Hay alguna manera de hacer CSS condicional específico del navegador dentro de un archivo * .css? para algunas ideas

IE7 fue una causa perdida ya que -ms-zoom no existía hasta IE8.

Aquí está el HTML real que probé con:

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

Acabo de probar y para mí, ninguna de las otras soluciones funcionó. Simplemente intenté esto y funcionó perfectamente en Firefox y Chrome, tal como esperaba:

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

y el 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;
}

Esto escala todo el contenido en un 30%. Los porcentajes de ancho / alto, por supuesto, deben ajustarse en consecuencia (1 / scale_factor).

Seguimiento de la respuesta de lxs : noté un problema en el que tener las etiquetas zoomy --webkit-transformal mismo tiempo parece confundir a Chrome (versión 15.0.874.15) al hacer un efecto de doble zoom. Pude solucionar el problema reemplazándolo zoompor -ms-zoom(dirigido solo a IE), dejando que Chrome use solo la --webkit-transformetiqueta, y eso aclaró las cosas.

No necesita envolver el iframe con una etiqueta adicional. Solo asegúrese de aumentar el ancho y la altura del marco flotante en la misma cantidad que reduce el marco flotante.

por ejemplo, para escalar el contenido del iframe al 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;
}

Básicamente, para obtener el mismo tamaño de iframe, debe escalar las dimensiones.

html {zoom: 0.4;}? -)

Pensé en compartir lo que se me ocurrió, utilizando gran parte de lo que se dio anteriormente. No he comprobado Chrome, pero por lo que puedo ver funciona en IE, Firefox y Safari.

Las compensaciones específicas y el factor de zoom en este ejemplo funcionaron para reducir y centrar dos sitios web en iframes para pestañas de Facebook (810 px de ancho).

Los dos sitios utilizados fueron un sitio de WordPress y una red de ning. No soy muy bueno con html, por lo que esto probablemente podría haberse hecho mejor, pero el resultado parece bueno.

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

Si desea que el iframe y su contenido se escalen cuando la ventana cambia de tamaño, puede configurar lo siguiente para el evento de cambio de tamaño de la ventana, así como el evento de carga de iframes.

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';
  };

Esto hará que el iframe y su contenido escalen al 100% del ancho del wrap div (o el porcentaje que desee). Como una ventaja adicional, no tiene que establecer el CSS del marco en valores codificados, ya que todos se configurarán dinámicamente, solo tendrá que preocuparse por cómo desea que se muestre el div.

He probado esto y funciona en Chrome, IE11 y Firefox.

Creo que puede hacer esto calculando la altura y el ancho que desee con javascript (a través de document.body.clientWidth, etc.) y luego inyectando el iframe en su HTML de esta manera:

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

No probé esto en IE6 pero parece funcionar con los buenos :)

Para aquellos de ustedes que tienen problemas para hacer que esto funcione en IE, es útil usar -ms-zoomcomo se sugiere a continuación y usar la función de zoom en el #wrapdiv, no en la iframeidentificación. En mi experiencia, con la zoomfunción tratando de escalar el iframe div de #frame, escalaría el tamaño del iframe y no el contenido dentro de él (que es lo que está buscando).

Se ve como esto. Funciona para mí en IE8, Chrome y FF.

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

Esta fue mi solución en una página con un ancho de 890 px

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

}

La solución #wrap #frame funciona bien, siempre que los números en #wrap sean #frame multiplicado por el factor de escala. Solo muestra esa parte del marco reducido. Puede verlo aquí para reducir los sitios web y ponerlo en forma de pinterest (con el complemento jQuery woodmark):

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

Probablemente no sea la mejor solución, pero parece funcionar bien.

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

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

Obviamente, no estoy tratando de arreglar al padre, simplemente agregando el estilo "zoom: 50%" al cuerpo del niño con un poco de javascript.

Tal vez podría establecer el estilo del elemento "HTML", pero no lo intenté.

Si su HTML está diseñado con CSS, probablemente pueda vincular diferentes hojas de estilo para diferentes tamaños.

No creo que HTML tenga tal funcionalidad. Lo único que puedo imaginar que haría el truco es hacer un procesamiento del lado del servidor. Tal vez podría obtener una instantánea de la imagen de la página web que desea publicar, escalarla en el servidor y entregarla al cliente. Sin embargo, esta sería una página no interactiva. (tal vez un mapa de imágenes podría tener el enlace, pero aún así).

Otra idea sería tener un componente del lado del servidor que alteraría el HTML. Algo así como la función de zoom firefox 2.0. Por supuesto, esto no es un zoom perfecto, pero es mejor que nada.

Aparte de eso, estoy sin ideas.

Como dije, dudo que puedas hacerlo.
Tal vez pueda escalar al menos el texto en sí, estableciendo un estilo font-size: 80%;.
No probado, no estoy seguro de que funcione, y no cambiará el tamaño de cuadros o imágenes.