1. ev
  2. Soru-cevap
  3. IFRAME içeriğinin yalnızca çerçeve kümesi kullanılmadan nasıl büyütülür?

IFRAME içeriğinin yalnızca çerçeve kümesi kullanılmadan nasıl büyütülür?

2011-08-26 23 views
8

Yalnızca çerçeve içeriğini büyütmem gerekiyor. Web sayfamda zoom: 0.75; height: 520px; width: 800px; kullanıyorum. Yakınlaştırma değerini artırırsam, çerçeve boyutunun artırılacağı anlamına gelir. O IFRAME boyutunu değiştirmeden IFRAME içeriğini yakınlaştırmak istediğiniz Yukarıdaki örnek HTML sayfası olarakIFRAME içeriğinin yalnızca çerçeve kümesi kullanılmadan nasıl büyütülür?

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

.

kaynak

2011-08-26 Baskaran

+0

olası yinelenen http://stackoverflow.com/questions/166160/how-can-i-scale-the-content-of -an-iframe) jquery olmadan – bummi

cevap

3

Bunun için javascript kullanmanız gerekebilir. http://css-tricks.com/examples/AnythingZoomer/

yerel bir web sayfasına src iframe değiştirebilir, (çerçeve içinde bir div yerleştirin ve jquery yükünü kullanın) (örn frame.htm.):

burada jQuery için bir yakınlaştırma eklentisi var fonksiyon çerçevesinin içine içerik yüklemek için: 

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

Ardından içeriği yakınlaştırmak için çerçevenin içine jQuery yakınlaştırma eklentisini kullanabilirsiniz

. 

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

     expansionSize: 30, 
     speedMultiplier: 1.4 

    }); 
</script>

kaynak

2011-08-26 12:15:02 Dan

+0

nasıl yapabilirim? – Baskaran

+1

Sorun şu ki, iframe'in içeriğini değil iframe'in yakınlaştırmasını söylüyorsunuz. CSS "#frame {zoom: 0.75 ..." kullanarak istenilen sonucu elde edemezsiniz. – Dan

14

benim facebook bir senaryo kullanmış ve IE ve Firefox'ta çalışıyor

bu bağlantılı belgeler ile çalışır, ancak emin 
<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>

kaynak

2012-02-14 12:24:44

+5

Bu harika - ancak ** ** 'zoom' ** ve ** satıcının belirli özelliklerinden birini kullanmayın. Örneğin: Chrome'u kullanırsanız, 'iframe'ınız yakınlaştırılır ve dönüştürülür - bu da çift yakınlaştırmaya neden olur. – Gerwald

+0

Bu soruya cevap vermiyor, değil mi? OP açıkça iframe'in ** içeriğini **, iframe'in ** değil ** ölçmek ister. – rustyx

3

değil lokal içerik aşağıdaki işleri barındırılan ile:

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

kaynak

2015-05-01 14:02:32

İlgili konular

 İlgili konular