2011-08-26 23 views
8

Necesito ampliar el contenido del marco solamente. Aquí en mi página web utilicé zoom: 0.75; height: 520px; width: 800px;. Si aumento el valor del zoom, significa que aumentará el tamaño del cuadro.Cómo ampliar el contenido de IFRAME solo sin utilizar un conjunto de marcos?

<HTML> 
<HEAD> 
    <TITLE> New Document </TITLE> 
<STYLE> 

#frame { width: 800px; height: 520px; border: 1px solid black; } 
#frame { zoom: 0.75; -moz-transform: scale(0.75); -moz-transform-origin: 0 0; } 
</STYLE> 
</HEAD> 

<BODY> 

    <IFRAME id="frame" src="http://www.google.com"></IFRAME> 

    </BODY> 

</HTML> 

En la página HTML de ejemplo anterior quiero enfocar el contenido del IFRAME sin cambiar el tamaño de ese IFRAME.

+0

posible duplicado de [Cómo puedo escalar que el contenido de un iframe?] (Http://stackoverflow.com/questions/166160/how-can-i-scale-the-content-of -an-iframe) – bummi

Respuesta

3

Para esto es posible que necesite usar javascript.

Hay un plugin para jQuery zoom aquí: http://css-tricks.com/examples/AnythingZoomer/

podría cambiar el iframes src en una página web local, colocar un div en el marco y utilizar la carga jQuery() (por ejemplo frame.htm). la función para cargar el contenido en la trama:

<script type="text/javascript"> 
    $(document).ready(function() { 
      $("#loadGoogle").load("pageToLoad.html", function(){ 
      //loaded 
      }); 
    }) 
</script> 
<div id="loadGoogle" style="width: 100%; height: 100%;"></div> 

continuación, utilizar el plugin de jQuery zoom dentro del marco para ampliar el contenido.

<script type="text/javascript"> 
    $("#loadGoogle").anythingZoomer({ 

     expansionSize: 30, 
     speedMultiplier: 1.4 

    }); 
</script> 
+0

sin jquery ¿cómo puedo hacer? – Baskaran

+1

El problema es que le está diciendo al iframe que amplíe, no el contenido del iframe. Al usar el CSS "#frame {zoom: 0.75 ..." no obtendrá el resultado deseado. – Dan

14

he utilizado un script en mi facebook y se está trabajando en IE y Firefox

<style type="text/css"> 
#iframe { 
    zoom: 0.15; 
    -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> 

<iframe src="https://www.wikipedia.org/" height="700" width="550">Wikipedia Encyclopedia</iframe> 
+5

Eso es genial, pero ** no use ** 'zoom' ** y ** una de las propiedades específicas del proveedor. Por ejemplo: si usas Chrome, tu 'iframe' se acerca y se transforma, lo que lleva a un doble zoom. – Gerwald

+0

Esto no responde del todo la pregunta, ¿o sí? El OP claramente quiere escalar los ** contenidos ** del iframe, ** no ** el propio iframe. – rustyx

3
No

seguro de que esto funciona con documentos vinculados, pero con alojada localmente contenido de las siguientes obras:

<IFRAME id="frame" src="local.pdf#zoom=100"></IFRAME> 
Cuestiones relacionadas