Bir iframe'in içeriğini nasıl ölçekleyebilirim?

Bir iframe'in içeriğini (örneğimde bir HTML sayfasıdır ve bir pop-up değildir) web sitemin bir sayfasında nasıl ölçekleyebilirim?

Örneğin, iframe'de görünen içeriği orijinal boyutunun% 80'inde görüntülemek istiyorum.

CSS'yi şu şekilde değiştirirseniz Kip'in çözümü Opera ve Safari'de çalışmalıdır:

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

Ayrıca, kaydırma çubuklarını önlemek için #frame üzerinde gizli taşmayı belirtmek isteyebilirsiniz.

IE ve Firefox'ta çalışan bir çözüm buldum (en azından mevcut sürümlerde). Safari / Chrome'da iframe, orijinal boyutunun% 75'ine göre yeniden boyutlandırılır, ancak iframe içindeki içerik hiç ölçeklenmez. Opera'da bu işe yaramıyor gibi görünüyor. Bu biraz ezoterik hissettiriyor, bu yüzden bunu yapmanın daha iyi bir yolu varsa önerileri memnuniyetle karşılarım.

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

Not: wrapÖğeyi Firefox için kullanmak zorunda kaldım . Nedense, Firefox'ta nesneyi% 75 oranında ölçeklendirdiğinizde, düzen nedenleriyle hala görüntünün orijinal boyutunu kullanır. (Div'ı yukarıdaki örnek koddan kaldırmayı deneyin, ne demek istediğimi göreceksiniz.)

Bu sorudan bazılarını buldum .

IE8, 9 ve 10'da çalışmayı denemek için saatlerce uğraştıktan sonra işte benim için işe yaradı.

Bu soyulmuş CSS, 1/7/2014 tarihinden itibaren FF 26, Chrome 32, Opera 18 ve IE9 -11'de çalışır:

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

IE8 için, genişliği / yüksekliği iframe ile eşleşecek şekilde ayarlayın ve .wrap konteyner divine -ms-zoom ekleyin:

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

Koşullu olarak uygun CSS'yi dahil etmek için tarayıcı koklamak için en sevdiğiniz yöntemi kullanın, bkz. * .Css dosyası içinde tarayıcıya özgü koşullu CSS yapmanın bir yolu var mı? bazı fikirler için.

IE7, IE8'e kadar -ms-zoom bulunmadığından kayıp bir nedendi.

İşte test ettiğim gerçek HTML:

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

Az önce test ettim ve benim için diğer çözümlerin hiçbiri işe yaramadı. Ben sadece denedim ve beklediğim gibi Firefox ve Chrome üzerinde mükemmel çalıştı:

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

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

Bu, tüm içeriği% 30 oranında ölçeklendirir. Genişlik / yükseklik yüzdeleri elbette buna göre ayarlanmalıdır (1 / ölçek_faktor).

İçin İzleyen LXS cevabı : Her iki sahip nerede bir sorun fark zoomve --webkit-transformetiketleri aynı anda bir yaparak Chrome (sürüm 15.0.874.15) karıştırmak gibi görünüyor sıralama etkinin çift zoom. Ben değiştirerek sorunu gidermek başardı zoomile -ms-zoomsadece faydalanmak için Chrome'u bırakarak (sadece IE hedefleyen) --webkit-transformetiketi ve şeyler netleşmiştir söyledi.

İframe'i ek bir etiketle sarmanıza gerek yoktur. Yalnızca iframe'in genişliğini ve yüksekliğini iframe'i ölçeklendirdiğiniz miktarda artırdığınızdan emin olun.

iframe içeriğini% 80'e ölçeklemek için:

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

Temel olarak, aynı boyuttaki iframe'i elde etmek için boyutları ölçeklendirmeniz gerekir.

html {zoom: 0.4;}? -)

Yukarıda verilenlerin çoğunu kullanarak bulduğum şeyi paylaşacağımı düşündüm. Chrome'u kontrol etmedim, ancak söyleyebildiğim kadarıyla IE, Firefox ve Safari'de çalışıyor.

Bu örnekteki özellik ofsetleri ve yakınlaştırma faktörü, iki web sitesini Facebook sekmeleri için iframe'lerde (810 piksel genişlik) küçültmek ve ortalamak için çalıştı.

Kullanılan iki site bir wordpress sitesi ve bir ning ağıydı. Html ile çok iyi değilim, bu yüzden bu muhtemelen daha iyi yapılabilirdi, ancak sonuç iyi görünüyor.

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

Pencere yeniden boyutlandırıldığında iframe'in ve içeriğinin ölçeklendirilmesini istiyorsanız, aşağıdakileri pencerenin resize olayının yanı sıra iframes onload olayına da ayarlayabilirsiniz.

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

Bu, iframe'i ve içeriğini sarma divının% 100 genişliğine (veya istediğiniz yüzde ne kadar) ölçeklendirir. Ek bir bonus olarak, çerçevenin css'sini sabit kodlanmış değerlere ayarlamanız gerekmez, çünkü bunların tümü dinamik olarak ayarlanır, sadece wrap div'in nasıl görüntülenmesini istediğiniz konusunda endişelenmeniz gerekir.

Bunu test ettim ve krom, IE11 ve firefox üzerinde çalışıyor.

Javascript (document.body.clientWidth vb. Aracılığıyla) ile istediğiniz yükseklik ve genişliği hesaplayarak ve daha sonra iframe böyle HTML içine enjekte ederek bunu yapabilirsiniz düşünüyorum:

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

Bunu IE6'da test etmedim ama iyi olanlarla çalışıyor gibi görünüyor :)

IE'de çalışmak için bu sorunu yaşıyorsanız, -ms-zoomaşağıda önerildiği gibi kullanmak #wrapve iframeid değil div üzerinde zoom işlevini kullanmak yararlıdır . Deneyimlerime göre, zoomiframe div'ini ölçeklemeye çalışan işlevle #frame, içindeki içeriği değil, iframe boyutunu ölçeklendirir (bu sizin için ne istediğinizdir).

Buna benzer. IE8, Chrome ve FF'de benim için çalışıyor.

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

890 piksel genişliğindeki bir sayfada bu benim çözümümdü

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

}

#Wrap #frame çözümü #wrap içindeki sayılar ölçek faktörünün #frame katı olduğu sürece iyi çalışır. Ölçeklendirilmiş çerçevenin yalnızca o bölümünü gösterir. Burada web sitelerini ölçeklendirip forma benzeyen bir form haline getirerek (ahşap jQuery eklentisi ile) görebilirsiniz:

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

Yani muhtemelen en iyi çözüm değil, ama Tamam çalışıyor gibi görünüyor.

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

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

Açıkçası ebeveyn düzeltmeye çalışmıyorum, sadece biraz "javascript" ile çocuğun vücuduna "zoom: 50%" tarzı ekleyerek.

Belki "HTML" öğesinin stilini ayarlayabilir, ancak bunu denemedi.

Html'niz css ile biçimlendirilmişse, muhtemelen farklı boyutlar için farklı stil sayfaları bağlayabilirsiniz.

HTML'nin böyle bir işlevi olduğunu sanmıyorum. Hile yapabileceğini hayal edebileceğim tek şey, bazı sunucu tarafı işlem yapmaktır. Belki de sunmak istediğiniz web sayfasının resmini alabilir, sunucuda ölçeklendirebilir ve istemciye sunabilirsiniz. Ancak bu etkileşimli olmayan bir sayfa olacaktır. (belki bir imagemap bağlantıya sahip olabilir, ama yine de.)

Başka bir fikir, HTML'yi değiştirecek bir sunucu tarafı bileşenine sahip olmaktır. Firefox 2.0 zum özelliği gibi SOrt. bu elbette mükemmel bir yakınlaştırma değil, ama hiç yoktan iyidir.

Bunun dışında fikirlerim kalmadı.

Söylendiği gibi, yapabileceğinizden şüpheliyim.
Belki bir stil ayarlayarak en azından metnin kendisini ölçeklendirebilirsiniz font-size: 80%;.
Test edilmedi, çalıştığından emin değil ve kutuları veya resimleri yeniden boyutlandırmıyor.