2011-08-26 20 views
8

Potrzebuję tylko powiększyć zawartość ramki. Tutaj na mojej stronie użyłem zoom: 0.75; height: 520px; width: 800px;. Jeśli zwiększę wartość powiększenia, oznacza to, że rozmiar ramki zostanie zwiększony.Jak powiększać zawartość IFRAME tylko bez użycia zestawu ramek?

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

Na powyższej przykładowej stronie HTML chcę powiększyć zawartość IFRAME bez zmiany rozmiaru tego IFRAME.

+0

możliwe duplikat [Jak mogę przeskalować zawartość iframe?] (Http://stackoverflow.com/questions/166160/how-can-i-scale-the-content-of -an-iframe) – bummi

Odpowiedz

3

Do tego może być konieczne użycie javascript.

Jest to plugin do jQuery zoom tutaj: http://css-tricks.com/examples/AnythingZoomer/

Można zmienić iframe src do lokalnej strony, umieść div w ramie i użyć jquery obciążenia() (np frame.htm). funkcja załadowania zawartości do ramki:

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

Następnie użyj wtyczki powiększania jquery wewnątrz ramki, aby powiększyć zawartość.

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

     expansionSize: 30, 
     speedMultiplier: 1.4 

    }); 
</script> 
+0

bez jquery jak mogę zrobić? – Baskaran

+1

Problem polega na tym, że informujesz element iframe, aby powiększyć, a nie zawartość elementu iframe. Używając CSS "#frame {zoom: 0.75 ..." nie osiągniesz pożądanego rezultatu. – Dan

14

użyłem skryptu w moim facebooku i to działa w IE i 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

To świetnie - ale ** nie używaj ** 'zoom' ** i ** jednej z właściwości specyficznych dla dostawcy. Np: jeśli używasz przeglądarki Chrome, element iframe jest powiększany i przekształcany, co prowadzi do podwójnego powiększenia. – Gerwald

+0

To nie odpowiada na pytanie, prawda? OP wyraźnie chce przeskalować ** zawartość ** elementu iframe, ** nie ** samego elementu iframe. – rustyx

3

Nie wiesz, to działa z powiązanych dokumentów, ale z lokalnie hostowane zawartość następujących prac:

<IFRAME id="frame" src="local.pdf#zoom=100"></IFRAME> 
Powiązane problemy