Sesuaikan lebar dan tinggi iframe agar sesuai dengan konten di dalamnya


300

Aku membutuhkan solusi untuk auto-menyesuaikan dengan widthdan heightdari iframeke pas pasan isinya. Intinya adalah bahwa lebar dan tinggi dapat diubah setelah iframetelah dimuat. Saya kira saya perlu aksi acara untuk menghadapi perubahan dimensi tubuh yang terkandung dalam iframe.



Jawaban yang diterima tidak berfungsi. Coba stackoverflow.com/a/31513163/482382
Steven Shaw

Jawaban:


268
<script type="application/javascript">

function resizeIFrameToFitContent( iFrame ) {

    iFrame.width  = iFrame.contentWindow.document.body.scrollWidth;
    iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}

window.addEventListener('DOMContentLoaded', function(e) {

    var iFrame = document.getElementById( 'iFrame1' );
    resizeIFrameToFitContent( iFrame );

    // or, to resize all iframes:
    var iframes = document.querySelectorAll("iframe");
    for( var i = 0; i < iframes.length; i++) {
        resizeIFrameToFitContent( iframes[i] );
    }
} );

</script>

<iframe src="usagelogs/default.aspx" id="iFrame1"></iframe>

8
@StoneHeart: ya, ini peramban silang. Kode ini tidak sesuai standar karena properti contentWindow, yang tidak didefinisikan dalam spesifikasi DOM. Di DOM spec ada properti yang disebut contentDocument, tetapi Internet Explorer 6 (dan 7?) Tidak mendukungnya. Properti contentWindow dapat digunakan sebagai gantinya dan itu diterapkan di semua browser umum (Gecko, Opera, Webkit, IE).
Rafael

30
Apa gunanya if (document.getElementById)?
Ally

55
Juga jangan lupa itu bukan domain silang. Alasannya mendapatkan semacam Galat: Izin ditolak untuk mengakses 'dokumen' properti jika domainnya berbeda. Sebuah solusi dapat ditemukan di sini
Pierre de LESPINAY

15
Syaratnya tidak hanya tidak berguna tetapi dalam keadaan langka itu dimaksudkan untuk dijamin menyebabkan masalah. Mengapa Anda memeriksa untuk melihat apakah ada metode dan kemudian menggunakan metode di luar pemeriksaan ??
JS

6
Saya pikir maksud Anda DOMContentLoaded, karena DOMContentReadysepertinya tidak menjadi apa-apa: developer.mozilla.org/en-US/…
Max Heiber

46

Plug-in jQuery lintas-browser .

Cross-bowser, pustaka lintas domain yang digunakan mutationObserveruntuk menjaga ukuran iFrame pada konten dan postMessageuntuk berkomunikasi antara iFrame dan halaman host. Bekerja dengan atau tanpa jQuery.


3
Pustaka iframe-resizer adalah solusi paling kuat.
kwill

35

Semua solusi yang diberikan sejauh ini hanya memperhitungkan perubahan ukuran sekali saja. Anda menyebutkan bahwa Anda ingin dapat mengubah ukuran iFrame setelah kontennya diubah. Untuk melakukan ini, Anda perlu menjalankan fungsi di dalam iFrame (setelah konten diubah, Anda perlu memecat suatu acara untuk mengatakan bahwa konten telah berubah).

Saya terjebak dengan ini untuk sementara waktu, karena kode di dalam iFrame tampak terbatas pada DOM di dalam iFrame (dan tidak dapat mengedit iFrame), dan kode yang dieksekusi di luar iFrame macet dengan DOM di luar iFrame (dan tidak bisa ' t mengambil acara yang datang dari dalam iFrame).

Solusi datang dari menemukan (melalui bantuan dari kolega) bahwa jQuery dapat diberi tahu apa yang digunakan DOM. Dalam hal ini, DOM dari jendela induk.

Dengan demikian, kode seperti ini melakukan apa yang Anda butuhkan (ketika dijalankan di dalam iFrame):

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("#IDofControlFiringResizeEvent").click(function () {
            var frame = $('#IDofiframeInMainWindow', window.parent.document);
            var height = jQuery("#IDofContainerInsideiFrame").height();
            frame.height(height + 15);
        });
    });
</script>

Apa kode lengkap untuk ini? Saya menganggap skrip berjalan di iframe html?
Andrew Hundt

Ini adalah kode lengkap, dan ya, ini berjalan di dalam HTML iFrame. Bagian "window.parent.document" menetapkan bahwa pemilih jQuery harus menggunakan DOM dokumen induk, dan bukan dokumen tempat Anda berada (yang ada di dalam iFrame).
Garnaph

13
Ini berfungsi dengan baik jika dokumen induk dan dokumen dalam iframe keduanya dari domain yang sama . Jika mereka tidak (atau, dalam chrome, jika keduanya adalah file lokal ), maka kebijakan keamanan "asal yang sama" browser masuk dan itu mencegah konten iframe dari memodifikasi dokumen induk.
user56reinstatemonica8

1
Bagi siapa pun yang mencoba membuat sesuatu seperti lintas-domain karya ini, lihat window.postMessage (IE8 +) dan perhatikan bahwa Anda memerlukan skrip khusus pada dokumen host (induk) dan sumber (dalam iframe). Plugin postmessage jQuery mungkin membantu. Karena Anda akan memerlukan skrip pada host dan sumber, mungkin lebih mudah jika host memuat konten oleh AJAX menggunakan JSON-P.
user56reinstatemonica8

3
Bagaimana memecat acara secara otomatis, bukan jQuery("#IDofControlFiringResizeEvent").click(function ()?
Ben

33

solusi satu-liner untuk embed: dimulai dengan ukuran min dan naik ke ukuran konten. tidak perlu untuk tag skrip.

<iframe src="http://URL_HERE.html" onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+"px";}(this));' style="height:200px;width:100%;border:none;overflow:hidden;"></iframe>


Cuplikan kode run tidak bekerja dengan Safari 9.1.1 mungkin termasuk masalah SO?
Elensar

Ini bukan lintas domain. Mungkin server perlu menambahkan beberapa header ke halaman berbingkai?
Finesse

Semua jawaban di sini yang menyebutkan scrollHeight/scrollWidthharus disesuaikan sedikit untuk memperhitungkan margin tubuh. Browser menerapkan margin bukan nol standar untuk elemen tubuh dokumen (dan juga berlaku untuk konten yang dimuat ke dalam bingkai). Solusi bekerja saya menemukan adalah untuk menambahkan ini: parseInt(window.getComputedStyle(this.contentDocument.body).margin.
Stan

24

Jika konten iframe berasal dari domain yang sama ini akan berfungsi dengan baik. Itu memang membutuhkan jQuery.

$('#iframe_id').load(function () {
    $(this).height($(this).contents().height());
    $(this).width($(this).contents().width());
});

Untuk mengubah ukurannya secara dinamis, Anda dapat melakukan ini:

<script language="javaScript">
<!--
function autoResize(){
    $('#themeframe').height($('#themeframe').contents().height());
}
//-->
</script>
<iframe id="themeframe" onLoad="autoResize();" marginheight="0" frameborder="0" src="URL"></iframe>

Lalu pada halaman yang memuat iframe tambahkan ini:

<script language="javaScript">
function resize()
{
    window.parent.autoResize();
}

$(window).on('resize', resize);
</script>

Adakah cara sederhana untuk melakukan ini ketika sumbernya berasal dari domain yang berbeda?
BruceJohnJennerLawso

15

Ini adalah solusi lintas-browser jika Anda tidak ingin menggunakan jQuery:

/**
 * Resizes the given iFrame width so it fits its content
 * @param e The iframe to resize
 */
function resizeIframeWidth(e){
    // Set width of iframe according to its content
    if (e.Document && e.Document.body.scrollWidth) //ie5+ syntax
        e.width = e.contentWindow.document.body.scrollWidth;
    else if (e.contentDocument && e.contentDocument.body.scrollWidth) //ns6+ & opera syntax
        e.width = e.contentDocument.body.scrollWidth + 35;
    else (e.contentDocument && e.contentDocument.body.offsetWidth) //standards compliant syntax – ie8
        e.width = e.contentDocument.body.offsetWidth + 35;
}

1
Itu aneh. Bagi saya itu menghitung lebar iframe yang sangat aneh. lebar isinya 750 dan ia menghitungnya 300. Apakah Anda punya ide mengapa?
Rob

Saya bermain dengan kode ini (menambahkan opsi ketinggian). Jika saya mengatur ketinggian iFrame pada 100%, itu membatasi sekitar 200px. Jika saya mengatur ketinggian iFrame di 600px, itu tetap dengan itu. @ RobertJagoda apakah Anda mendapatkan solusi untuk ini?
iaindownie

9

Setelah saya mencoba semua yang ada di bumi, ini benar-benar bekerja untuk saya.

index.html

<style type="text/css">
html, body{
  width:100%;
  height:100%;
  overflow:hidden;
  margin:0px;   
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function autoResize(iframe) {
    $(iframe).height($(iframe).contents().find('html').height());
}
</script>

<iframe src="http://iframe.domain.com" width="100%" height="100%" marginheight="0" frameborder="0" border="0" scrolling="auto" onload="autoResize(this);"></iframe>

katanya: Uncaught TypeError: $ bukan fungsi di autoResize ((indeks): 200) di HTMLIFrameElement.onload ((indeks): 204)
Michael Rogers

2
@Michael Rogers Ada konflik dengan $ atau Anda lupa untuk memasukkan file jQuery.js. Gunakan fungsi generik stackoverflow.com/questions/6109847/… atau ganti $ dengan jQuery
Adrian P.

8

Saya menggunakan kode ini untuk memuat ulang ketinggian semua iframe secara otomatis (dengan kelas autoHeight) saat dimuat di halaman. Diuji dan berfungsi di IE, FF, Chrome, Safari, dan Opera.

function doIframe() {
    var $iframes = $("iframe.autoHeight"); 
    $iframes.each(function() {
        var iframe = this;
        $(iframe).load(function() {
            setHeight(iframe);
        });
    });
}

function setHeight(e) {
  e.height = e.contentWindow.document.body.scrollHeight + 35;
}

$(window).load(function() {
    doIframe();
});

2
Apa sihir yang Anda tambahkan ini? Untuk browser dan OS manakah Anda mengukurnya?
h2stein

Sekarang saya benar-benar tidak tahu mengapa saya menambahkan 35 piksel. Tapi saya pasti bisa memberi tahu Anda bahwa saya mengujinya pada FF, IE (7, 8, 9) & Chrome dan saya telah bekerja dengan baik.
petriq

3
Saya pikir 35 hanyalah ketebalan scroll-bar
Sadegh

Saya harus mengubah sedikit ini agar berfungsi - disebut setHeight (iframe); langsung (menghapus pembungkus $ (iframe) .load () di sekitarnya.
shacker

Keajaiban 35 piksel yang ditambahkan adalah untuk memperhitungkan bantalan iframe. Saya akan menambahkan bahwa iframe tidak boleh memuat konten dari ifram harus mengurus hal ini.
Filipe Melo

5

Ini adalah solusi bukti yang solid

function resizer(id)
{

var doc=document.getElementById(id).contentWindow.document;
var body_ = doc.body, html_ = doc.documentElement;

var height = Math.max( body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight );
var width  = Math.max( body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth );

document.getElementById(id).style.height=height;
document.getElementById(id).style.width=width;

}

html

<IFRAME SRC="blah.php" id="iframe1"  onLoad="resizer('iframe1');"></iframe>

3

Saya sedikit mengubah solusi hebat Garnaph di atas. Sepertinya solusinya memodifikasi ukuran iframe berdasarkan ukuran tepat sebelum acara. Untuk situasi saya (pengiriman email melalui iframe) saya membutuhkan tinggi iframe untuk berubah tepat setelah pengiriman. Misalnya menunjukkan kesalahan validasi atau pesan "terima kasih" setelah pengiriman.

Saya baru saja menghilangkan fungsi klik bersarang () dan memasukkannya ke html iframe saya:

<script type="text/javascript">
    jQuery(document).ready(function () {
        var frame = $('#IDofiframeInMainWindow', window.parent.document);
        var height = jQuery("#IDofContainerInsideiFrame").height();
        frame.height(height + 15);
    });
</script>

Bekerja untuk saya, tetapi tidak yakin tentang fungsionalitas lintas browser.


3

Jika Anda dapat mengontrol konten IFRAME dan jendela induk, maka Anda memerlukan iFrame Resizer .

Pustaka ini memungkinkan pengubahan ukuran otomatis dari tinggi dan lebar iFrames sama dan lintas domain agar sesuai dengan konten mereka. Ini menyediakan berbagai fitur untuk mengatasi masalah paling umum dengan menggunakan iFrames, ini termasuk:

  • Mengubah ukuran tinggi dan lebar iFrame ke ukuran konten.
  • Bekerja dengan iFrames berganda dan bersarang.
  • Otentikasi domain untuk iFrames lintas domain.
  • Menyediakan serangkaian metode perhitungan ukuran halaman untuk mendukung tata letak CSS yang kompleks.
  • Mendeteksi perubahan pada DOM yang dapat menyebabkan pengubahan ukuran halaman menggunakan MutationObserver.
  • Mendeteksi peristiwa yang dapat menyebabkan perubahan ukuran halaman (Ubah Ukuran Jendela, Animasi dan Transisi CSS, Perubahan Orientasi, dan peristiwa Mouse).
  • Perpesanan yang disederhanakan antara iFrame dan halaman host melalui postMessage.
  • Memperbaiki tautan halaman di iFrame dan mendukung tautan antara halaman iFrame dan induk.
  • Menyediakan metode pengubahan ukuran dan gulir khusus.
  • Mengekspos posisi orangtua dan ukuran viewport ke iFrame.
  • Bekerja dengan ViewerJS untuk mendukung dokumen PDF dan ODF.
  • Dukungan fallback ke IE8.

2

semua tidak dapat bekerja menggunakan metode di atas.

javascript:

function resizer(id) {
        var doc = document.getElementById(id).contentWindow.document;
        var body_ = doc.body, html_ = doc.documentElement;

        var height = Math.max(body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight);
        var width = Math.max(body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth);

        document.getElementById(id).style.height = height;
        document.getElementById(id).style.width = width;

    }

html:

<div style="background-color:#b6ff00;min-height:768px;line-height:inherit;height:inherit;margin:0px;padding:0px;overflow:visible" id="mainDiv"  >
         <input id="txtHeight"/>height     <input id="txtWidth"/>width     
        <iframe src="head.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" style="width:100%; height: 47px" frameborder="0"  ></iframe>
        <iframe src="left.aspx" name="leftFrame" scrolling="yes"   id="Iframe1" title="leftFrame" onload="resizer('Iframe1');" style="top:0px;left:0px;right:0px;bottom:0px;width: 30%; border:none;border-spacing:0px; justify-content:space-around;" ></iframe>
        <iframe src="index.aspx" name="mainFrame" id="Iframe2" title="mainFrame" scrolling="yes" marginheight="0" frameborder="0" style="width: 65%; height:100%; overflow:visible;overflow-x:visible;overflow-y:visible; "  onload="resizer('Iframe2');" ></iframe>
</div>

Env: IE 10, Windows 7 x64


2

Saya menemukan solusi lain setelah beberapa percobaan. Saya awalnya mencoba kode yang ditandai sebagai 'jawaban terbaik' untuk pertanyaan ini dan tidak berhasil. Dugaan saya adalah karena iframe saya di program saya pada saat itu dihasilkan secara dinamis. Berikut adalah kode yang saya gunakan (ini berfungsi untuk saya):

Javascript di dalam iframe yang sedang dimuat:

window.onload = function()
    {
        parent.document.getElementById('fileUploadIframe').style.height = document.body.clientHeight+5+'px';
        parent.document.getElementById('fileUploadIframe').style.width = document.body.clientWidth+18+'px';
    };

Anda perlu menambahkan 4 atau lebih piksel pada ketinggian untuk menghapus bilah gulir (beberapa bug / efek iframe yang aneh). Lebar bahkan lebih aneh, Anda aman untuk menambahkan 18px ke lebar tubuh. Pastikan juga Anda menerapkan css untuk badan iframe (di bawah).

html, body {
   margin:0;
   padding:0;
   display:table;
}

iframe {
   border:0;
   padding:0;
   margin:0;
}

Berikut ini adalah html untuk iframe:

<iframe id="fileUploadIframe" src="php/upload/singleUpload.html"></iframe>

Ini semua kode di dalam iframe saya:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>File Upload</title>
    <style type="text/css">
    html, body {
        margin:0;
        padding:0;
        display:table;
    }
    </style>
    <script type="text/javascript">
    window.onload = function()
    {
        parent.document.getElementById('fileUploadIframe').style.height = document.body.clientHeight+5+'px';
        parent.document.getElementById('fileUploadIframe').style.width = document.body.clientWidth+18+'px';
    };
    </script>
</head>
<body>
    This is a test.<br>
    testing
</body>
</html>

Saya telah melakukan pengujian di chrome dan sedikit di firefox (di windows xp). Saya masih memiliki lebih banyak pengujian untuk dilakukan, jadi tolong beri tahu saya bagaimana ini bekerja untuk Anda.


terima kasih ini bekerja luar biasa di browser seluler dari apa yang telah saya uji dan di situlah saya mengalami masalah dengan iframes yang diubah ukurannya!
Mircea Sandu

Senang Anda menyukainya :-) Saya telah menemukan iframe sebagian besar jauh lebih efisien dan menawarkan dukungan browser yang lebih baik daripada Ajax.
www139

1
TERIMA KASIH!!! Terutama, karena Anda adalah satu-satunya yang menentukan WHERE untuk meletakkan kode tanpa menganggap orang tahu. Solusi sederhana ini bekerja dengan baik untuk saya (Firefox, Chrome, Edge), untuk membingkai konten dinamis pada domain yang sama di situs Wordpress saya. Saya memiliki formulir-pilih yang akan menampilkan konten dinamis dari berbagai panjang. IFrame menyesuaikan dengan indah. Saya memang harus mengubah .clientHeight + 5 + 'px'; dan clientWidth + 18 + 'px'; menjadi lebih banyak piksel. Dan saya tidak yakin mengapa layar: table; di CSS diperlukan jadi saya berkomentar untuk tujuan saya. Terima kasih lagi.
Heres2u

1

Inilah yang akan saya lakukan (diuji dalam FF / Chrome):

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function autoResize(iframe) {
    $(iframe).height($(iframe).contents().find('html').height());
}
</script>

<iframe src="page.html" width="100%" height="100" marginheight="0" frameborder="0" onload="autoResize(this);"></iframe>

Jika Microsoft tidak peduli tentang itu, siapa yang harus peduli?
m3nda

1

Berikut ini beberapa metode:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>

DAN ALTERNATIF LAIN

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>

UNTUK MENYEMBUNYAKAN SKROLLING DENGAN 2 ALTERNATIF SEPERTI YANG TAMPILKAN DI ATAS

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>

HACK DENGAN KODE KEDUA

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>

Untuk menyembunyikan bilah gulir iFrame, induk dibuat "overflow: disembunyikan" untuk menyembunyikan bilah gulir dan iFrame dibuat naik hingga 150% lebar dan tinggi yang memaksa bilah gulir di luar halaman dan karena badan tidak t memiliki bilah gulir yang mungkin tidak mengharapkan iframe melebihi batas halaman. Ini menyembunyikan bilah gulir iFrame dengan lebar penuh!

sumber: atur iframe auto height


Contoh yang Anda berikan seharusnya membuat konten penuh iframe, bukan untuk mengotomatiskan ketinggian iframe agar sesuai dengan semua konten internal. Itu tidak menjawab pertanyaan.
nickornotto


1

Saya menemukan pengubah ukuran ini berfungsi lebih baik:

function resizer(id)
{

    var doc = document.getElementById(id).contentWindow.document;
    var body_ = doc.body;
    var html_ = doc.documentElement;

    var height = Math.max( body_.scrollHeight, body_.offsetHeight, html_.clientHeight,     html_.scrollHeight, html_.offsetHeight );
    var width  = Math.max( body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth );

    document.getElementById(id).height = height;
    document.getElementById(id).width = width;

}

Perhatikan objek gaya dihapus.


Tidak berfungsi untuk saya di Chrome / Win10 - konten terpotong sebagian di bagian bawah.
glenneroo

1

Di jQuery, ini adalah pilihan terbaik bagi saya, itu sangat membantu saya !! Saya menunggu itu membantu Anda!

iframe

<iframe src="" frameborder="0" id="iframe" width="100%"></iframe>

jQuery

<script>            
        var valueSize = $( "#iframe" ).offset();
        var totalsize = (valueSize.top * 2) + valueSize.left;

        $( "#iframe" ).height(totalsize);            

</script>

1

Konteks

Saya harus melakukan ini sendiri dalam konteks ekstensi web. Ekstensi web ini menyuntikkan sebagian UI ke setiap halaman, dan UI ini tinggal di dalam sebuah iframe. Konten di dalamnya iframedinamis, jadi saya harus menyesuaikan kembali lebar dan tinggi dari iframedirinya sendiri.

Saya menggunakan Bereaksi tetapi konsep ini berlaku untuk setiap perpustakaan.

Solusi saya (ini mengasumsikan bahwa Anda mengontrol halaman dan iframe)

Di dalam iframesaya mengubah bodygaya untuk memiliki dimensi yang sangat besar. Ini akan memungkinkan elemen-elemen di dalam lay out menggunakan semua ruang yang diperlukan. Pembuatan widthdan height100% tidak berfungsi untuk saya (saya kira karena iframe memiliki default width = 300pxdan height = 150px)

/* something like this */
body {
  width: 99999px;
  height: 99999px;
}

Lalu saya menyuntikkan semua iframe UI di dalam div dan memberikannya beberapa style

#ui-root {
  display: 'inline-block';     
}

Setelah merender aplikasi saya di dalam ini #ui-root(dalam Bereaksi saya melakukan ini di dalam componentDidMount) saya menghitung dimensi div ini seperti dan menyinkronkannya ke halaman induk menggunakan window.postMessage:

let elRect = el.getBoundingClientRect()
window.parent.postMessage({
  type: 'resize-iframe',
  payload: {
    width: elRect.width,
    height: elRect.height
  }
}, '*')

Dalam kerangka induk saya melakukan sesuatu seperti ini:

window.addEventListener('message', (ev) => {
  if(ev.data.type && ev.data.type === 'resize-iframe') {
    iframe.style.width = ev.data.payload.width + 'px'
    iframe.style.height = ev.data.payload.height + 'px'
  }
}, false)

Solusi bagus! Terima kasih!
redelschaap


0

Saya tahu posnya sudah tua, tetapi saya yakin ini adalah cara lain untuk melakukannya. Saya baru saja menerapkan kode saya. Berfungsi sempurna baik pada pemuatan halaman dan pada ukuran halaman:

var videoHeight;
var videoWidth;
var iframeHeight;
var iframeWidth;

function resizeIframe(){
    videoHeight = $('.video-container').height();//iframe parent div's height
    videoWidth = $('.video-container').width();//iframe parent div's width

    iframeHeight = $('.youtubeFrames').height(videoHeight);//iframe's height
    iframeWidth = $('.youtubeFrames').width(videoWidth);//iframe's width
}
resizeIframe();


$(window).on('resize', function(){
    resizeIframe();
});

0

Javascript untuk ditempatkan di header:

function resizeIframe(obj) {
        obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
      }

Ini dia iframe kode html:

<iframe class="spec_iframe" seamless="seamless" frameborder="0" scrolling="no" id="iframe" onload="javascript:resizeIframe(this);" src="somepage.php" style="height: 1726px;"></iframe>

Lembar gaya css

>

.spec_iframe {
        width: 100%;
        overflow: hidden;
    }

0

Untuk atribut direktif angularjs:

G.directive ( 'previewIframe', function () {
return {
    restrict : 'A',
    replace : true,
    scope : true,
    link : function ( scope, elem, attrs ) {
        elem.on ( 'load', function ( e ) {
            var currentH = this.contentWindow.document.body.scrollHeight;
            this.style.height = eval( currentH ) + ( (25 / 100)* eval( currentH ) ) + 'px';
        } );
    }
};
} );

Perhatikan persentasenya, saya menyisipkannya sehingga Anda dapat membalas penskalaan yang biasanya dilakukan untuk iframe, teks, iklan dll, cukup cantumkan 0 jika tidak ada penskalaan yang diterapkan


0

Ini adalah bagaimana saya melakukannya saat beban atau ketika segalanya berubah.

parent.jQuery("#frame").height(document.body.scrollHeight+50);

0

Jelas ada banyak skenario, namun, saya memiliki domain yang sama untuk dokumen dan iframe dan saya dapat menangani ini di akhir konten iframe saya:

var parentContainer = parent.document.querySelector("iframe[src*=\"" + window.location.pathname + "\"]");
parentContainer.style.height = document.body.scrollHeight + 50 + 'px';

Ini 'menemukan' wadah induk dan kemudian menetapkan panjang menambahkan pada faktor fudge 50 piksel untuk menghapus bilah gulir.

Tidak ada apa-apa di sana untuk 'mengamati' perubahan tinggi dokumen, ini saya tidak perlu untuk kasus penggunaan saya. Dalam jawaban saya, saya memang membawa referensi ke wadah induk tanpa menggunakan id yang dipanggang ke dalam konten induk / iframe.


0

Jika Anda dapat hidup dengan rasio aspek tetap dan Anda ingin iframe responsif , kode ini akan berguna bagi Anda. Itu hanya aturan CSS.

.iframe-container {
  overflow: hidden;
  /* Calculated from the aspect ration of the content (in case of 16:9 it is 9/16= 
  0.5625) */
  padding-top: 56.25%;
  position: relative;
}
.iframe-container iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

Iframe harus memiliki div sebagai wadah.

<div class="iframe-container">
   <iframe src="http://example.org"></iframe>
</div>

Kode sumber didasarkan pada situs ini dan Ben Marshall memiliki penjelasan yang bagus.


-1

Kesederhanaan:

var iframe = $("#myframe");
$(iframe.get(0).contentWindow).on("resize", function(){
    iframe.width(iframe.get(0).contentWindow.document.body.scrollWidth);
    iframe.height(iframe.get(0).contentWindow.document.body.scrollHeight);
});

-1

Jika kontennya hanya html yang sangat sederhana, cara paling sederhana adalah menghapus iframe dengan javascript

Kode HTML:

<div class="iframe">
    <iframe src="./mypage.html" frameborder="0" onload="removeIframe(this);"></iframe>
</div>

Kode Javascript:

function removeIframe(obj) {
    var iframeDocument = obj.contentDocument || obj.contentWindow.document;
    var mycontent = iframeDocument.getElementsByTagName("body")[0].innerHTML;
    obj.remove();
    document.getElementsByClassName("iframe")[0].innerHTML = mycontent;
}

1
Ini mengubah garis besar dokumen induk. Jika Anda ingin memiliki dokumen lain sebagai gambar dengan figcaption maka ini tidak membuat garis besar dokumen sebagai ringkas. Berbagai kasus penggunaan berbeda, tetapi saya ingin memindahkan cuplikan kode ke iframe karena alasan garis besar.
Kucing Henry

-2
<iframe src="hello.html" sandbox="allow-same-origin"
        onload="this.style.height=(this.contentWindow.document.body.scrollHeight+20)+'px';this.style.width=(this.contentWindow.document.body.scrollWidth+20)+'px';">
</iframe>

Ini bukan CSS, ini JS.
clifgriffin
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.