Sesuaikan lebar dan tinggi iframe agar sesuai dengan konten di dalamnya

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.

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

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.

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>

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>

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>

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

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>

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();
});

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>

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.

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.

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

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.

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>

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

Jika seseorang sampai di sini: Saya punya masalah dengan solusi ketika saya menghapus div dari iframe - iframe tidak menjadi lebih pendek.

Ada plugin Jquery yang berfungsi:

http://www.jqueryscript.net/layout/jQuery-Plugin-For-Auto-Resizing-iFrame-iFrame-Resizer.html

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.

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>

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)

Dimungkinkan untuk membuat IFrame "seperti hantu" yang bertindak seperti itu tidak ada di sana.

Lihat http://codecopy.wordpress.com/2013/02/22/ghost-iframe-crossdomain-iframe-resize/

Pada dasarnya Anda menggunakan sistem acara yang parent.postMessage(..)dijelaskan dalam https://developer.mozilla.org/en-US/docs/DOM/window.postMessage

Ini berfungsi pada semua browser modern!

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();
});

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

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

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

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

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.

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.

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

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

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