Bagaimana saya bisa skala konten iframe?

237

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.

John Griffiths
sumber
14
Mengikis pertanyaan - praktik yang baik? Saya kira tidak.
Konrad Rudolph
9
Kasus penggunaan umum: mempratinjau halaman / situs dalam editor wysiwyg online
frenchone

Jawaban:

224

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.

lxs
sumber
@JonathanM - cf meta.stackexchange.com/questions/75043/... , apakah saya melakukan sesuatu yang salah di sini?
lxs
@ lxs, Tidak sama sekali. Saya menyukainya, dan memberinya +1. Kerja bagus.
Jonathan M
7
Saya perhatikan bahwa pada chrome saya mendapatkan zoom dan transformasi webkit yang diterapkan yang menyebabkan skala diterapkan dua kali.
dennisjtaylor
1
seperti @dennisjtaylor mengatakan, chrome tampaknya menerapkan skala dua kali - seperti yang terlihat di sini jsfiddle.net/zjTBq/embedded/result
Horse
3
Karena semua browser modern telah mendukung transformasi untuk beberapa waktu, saya akan mempertimbangkan untuk menggunakan versi yang tidak diperbaiki (setidaknya sebagai alternatif).
berjalan
55

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 .

Tidur
sumber
31

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/

Eric Sassaman
sumber
17

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

MrP01
sumber
2
Anda juga ingin menambahkan overflow: hidden;ke .wrapelemen. Saat Anda menggunakan iframe { width: 200%; height: 200%; transform: scale(0.5); }iframe mulai meluap.
ozgrozer
Ini adalah pendekatan mutakhir. Terima kasih!
fuggi
10

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.

r3cgm
sumber
9

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.

Matthew Wilcoxson
sumber
7

html {zoom: 0.4;}? -)

roenving
sumber
3
Itu akan menjadi 0,8 untuk 80%, tetapi itu adalah Microsoftisme eksklusif, jadi mungkin tidak cocok. Ini juga hanya akan berfungsi jika dokumen dimuat ke dalam bingkai dapat diedit, yang tidak mungkin.
Quentin
7

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>
Jon Fergus
sumber
5

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.

pengguna3298597
sumber
4

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

Eric Wendelin
sumber
Maafkan ketidaktahuan saya tapi bukankah itu membuat iframe 80% dari halaman sumber, daripada memperkecil halaman sumber itu sendiri?
Phill Healey
3

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;
}
Tiago
sumber
Gunakan zoomdalam Mode Standar IE8, gunakan -ms-zoomdalam mode kebiasaan.
Jonathon Hill
3

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; 

}
Mathias Asberg
sumber
2

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

Stefan Gruenwald
sumber
2

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.

Graham
sumber
1
Jangan lakukan ini. Dari developer.mozilla.org/en-US/docs/Web/CSS/zoom : "Fitur ini tidak standar dan tidak pada jalur standar. Jangan menggunakannya di situs produksi yang menghadap Web: itu tidak akan bekerja untuk setiap pengguna. Mungkin juga ada ketidakcocokan besar antara implementasi dan perilaku dapat berubah di masa depan. "
hackel
+1 Ini (memodifikasi konten iframe, bukan iframe itu sendiri) sepertinya ide yang lebih baik. Saya membutuhkan cara untuk memperkecil halaman dan menampilkannya sebagai pratinjau halaman itu dan pendekatan ini memecahkan masalah.
akinuri
@akinuri Ya persis seperti itulah saya menggunakannya. Saya telah melalui sejumlah solusi, tetapi ini tampaknya yang paling mudah. Saya baru saja mengulangi iframe dan menyusutkan semuanya untuk mendapatkan halaman thumbnail. Tidak diperlukan perubahan pada halaman anak.
Graham
1

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

Jon
sumber
0

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.

Alexandros Marinos
sumber
0

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.

PhiLho
sumber