Bagaimana saya bisa skala konten iframe?

Bagaimana saya bisa skala konten iframe (dalam contoh saya ini adalah halaman HTML, dan bukan popup) di halaman situs web saya?

Misalnya, saya ingin menampilkan konten yang muncul di iframe di 80% dari ukuran aslinya.

Solusi Kip harus bekerja pada Opera dan Safari jika Anda mengubah CSS ke:

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

Anda mungkin juga ingin menentukan overflow: disembunyikan di #frame untuk mencegah scrollbar.

Saya menemukan solusi yang berfungsi di IE dan Firefox (setidaknya pada versi saat ini). Di Safari / Chrome, iframe diubah ukurannya menjadi 75% dari ukuran aslinya, tetapi konten di dalam iframe tidak diskalakan sama sekali. Di Opera, ini sepertinya tidak berhasil. Ini terasa agak esoteris, jadi jika ada cara yang lebih baik untuk melakukannya saya akan menerima saran.

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

Catatan: Saya harus menggunakan wrapelemen untuk Firefox. Untuk beberapa alasan, di Firefox saat Anda menurunkan skala objek hingga 75%, ia masih menggunakan ukuran asli gambar untuk alasan tata letak. (Coba hapus div dari kode contoh di atas dan Anda akan melihat apa yang saya maksud.)

Saya menemukan beberapa dari pertanyaan ini .

Setelah berjuang dengan ini selama berjam-jam mencoba membuatnya bekerja di IE8, 9, dan 10 inilah yang bekerja untuk saya.

CSS strip-down ini berfungsi di FF 26, Chrome 32, Opera 18, dan IE9 -11 pada 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;
}

Untuk IE8, atur lebar / tinggi agar sesuai dengan iframe, dan tambahkan -ms-zoom ke .wrap container div:

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

Cukup gunakan metode favorit Anda untuk mengendus browser untuk memasukkan CSS yang sesuai secara kondisional, lihat Apakah ada cara untuk melakukan CSS bersyarat khusus browser di dalam file * .css? untuk beberapa ide.

IE7 adalah penyebab yang hilang karena -ms-zoom tidak ada sampai IE8.

Inilah HTML sebenarnya yang saya uji:

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

Saya baru saja menguji dan bagi saya, tidak ada solusi lain yang berfungsi. Saya hanya mencoba ini dan itu bekerja dengan sempurna di Firefox dan Chrome, seperti yang saya harapkan:

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

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

Ini skala semua konten sebesar 30%. Persentase lebar / tinggi tentu saja perlu disesuaikan (1 / scale_factor).

Tindak lanjuti jawaban lxs : Saya melihat ada masalah di mana memiliki tag zoomdan --webkit-transformsekaligus tampaknya membingungkan Chrome (versi 15.0.874.15) dengan melakukan efek zoom dua kali lipat. Saya dapat mengatasi masalah ini dengan menggantinya zoomdengan -ms-zoom(hanya ditargetkan pada IE), meninggalkan Chrome hanya untuk menggunakan --webkit-transformtag, dan hal itu sudah beres.

Anda tidak perlu membungkus iframe dengan tag tambahan. Pastikan Anda menambah lebar dan tinggi iframe dengan jumlah yang sama dengan menurunkan skala iframe.

misalnya untuk skala konten iframe hingga 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;
}

Pada dasarnya, untuk mendapatkan ukuran iframe yang sama Anda perlu skala dimensi.

html {zoom: 0.4;}? -)

Saya pikir saya akan membagikan apa yang saya dapatkan, menggunakan banyak dari apa yang diberikan di atas. Saya belum memeriksa Chrome, tetapi berfungsi di IE, Firefox dan Safari, sejauh yang saya tahu.

Offset spesifik dan faktor zoom dalam contoh ini berfungsi untuk mengecilkan dan memusatkan dua situs web di iframe untuk tab Facebook (lebar 810px).

Dua situs yang digunakan adalah situs wordpress dan jaringan. Saya tidak terlalu baik dengan html, jadi ini mungkin bisa dilakukan lebih baik, tetapi hasilnya tampak bagus.

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

Jika Anda ingin iframe dan kontennya untuk menskala ketika jendela diubah ukurannya, Anda dapat mengatur yang berikut ini untuk acara pengubahan ukuran jendela serta acara iframe yang memuat.

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

Ini akan membuat iframe dan skala kontennya menjadi 100% lebar dari wrap div (atau berapa pun persen yang Anda inginkan). Sebagai bonus tambahan, Anda tidak perlu mengatur css dari frame ke nilai-nilai yang dikodekan karena semuanya akan diatur secara dinamis, Anda hanya perlu khawatir tentang bagaimana Anda ingin div pembungkus ditampilkan.

Saya sudah menguji ini dan berfungsi pada chrome, IE11, dan firefox.

Saya pikir Anda bisa melakukan ini dengan menghitung tinggi dan lebar yang Anda inginkan dengan javascript (via document.body.clientWidth dll) dan kemudian menyuntikkan iframe ke dalam HTML Anda seperti ini:

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

Saya tidak menguji ini di IE6 tetapi tampaknya bekerja dengan yang baik :)

Bagi Anda yang mengalami kesulitan menjalankan ini di IE, sebaiknya gunakan -ms-zoomseperti yang disarankan di bawah ini dan gunakan fungsi zoom pada #wrapdiv, bukan iframeid. Dalam pengalaman saya, dengan zoomfungsi mencoba skala div iframe dari#frame , itu akan skala ukuran iframe dan bukan konten di dalamnya (yang adalah apa yang Anda inginkan).

Terlihat seperti ini. Bekerja untuk saya di IE8, Chrome dan FF.

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

Ini adalah solusi saya pada halaman dengan lebar 890px

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

}

Solusi #wrap #frame berfungsi dengan baik, asalkan angka dalam #wrap adalah #frame dikalikan faktor skala. Ini hanya menunjukkan bagian bingkai yang diperkecil. Anda dapat melihatnya di sini untuk menurunkan situs web dan memasukkannya ke formulir seperti pinterest (dengan plugin woodmark jQuery):

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

Jadi mungkin bukan solusi terbaik, tetapi sepertinya berhasil OK.

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

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

Jelas tidak berusaha memperbaiki orang tua, cukup menambahkan gaya "zoom: 50%" ke tubuh anak dengan sedikit javascript.

Mungkin bisa mengatur gaya elemen "HTML", tetapi tidak mencobanya.

Jika html Anda ditata dengan css, Anda mungkin dapat menautkan berbagai style sheet untuk ukuran yang berbeda.

Saya tidak berpikir HTML memiliki fungsi seperti itu. Satu-satunya hal yang dapat saya bayangkan akan melakukan trik adalah melakukan beberapa pemrosesan sisi server. Mungkin Anda bisa mendapatkan snapshot gambar dari halaman web yang ingin Anda layani, skala di server dan melayani ke klien. Ini akan menjadi halaman non-interaktif. (mungkin sebuah imagemap dapat memiliki tautan, tetapi tetap saja.)

Gagasan lain adalah memiliki komponen sisi server yang akan mengubah HTML. Bagian seperti fitur zoom firefox 2.0. ini tentu saja tidak zoom sempurna, tetapi lebih baik daripada tidak sama sekali.

Selain itu, saya kehabisan ide.

Seperti yang saya katakan, saya ragu Anda bisa melakukannya.
Mungkin Anda bisa menskalakan setidaknya teks itu sendiri, dengan mengatur gaya font-size: 80%;.
Belum diuji, tidak yakin itu berfungsi, dan tidak akan mengubah ukuran kotak atau gambar.