Sesuaikan lebar dan tinggi dari iframe sesuai dengan konten di dalamnya

Lintas-browser jQuery plug-in.

Cross-browser, cross domain perpustakaan yang menggunakan mutationObserver untuk menjaga iFrame berukuran kandungan dan postMessage untuk berkomunikasi antara iFrame dan host halaman. Bekerja dengan atau tanpa jQuery.

Semua solusi yang diberikan sejauh ini akun hanya untuk sekali dari resize. Anda menyebutkan anda ingin dapat mengubah ukuran iFrame setelah isi yang dimodifikasi. Dalam rangka untuk melakukan ini, anda perlu untuk menjalankan fungsi di dalam iFrame (sekali isinya berubah, anda perlu untuk menembak sebuah acara untuk mengatakan bahwa isi telah berubah).

Aku terjebak dengan ini untuk sementara waktu, seperti kode di dalam iFrame tampaknya terbatas pada DOM di dalam iFrame (dan tidak't mengedit iFrame), dan kode yang dieksekusi di luar iFrame terjebak dengan DOM di luar iFrame (dan tidak't mengambil sebuah acara yang berasal dari dalam iFrame).

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

Dengan demikian, kode seperti ini tidak apa yang anda perlu (ketika berjalan 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>

satu-liner solusi untuk embeds: dimulai dengan min-ukuran dan meningkatkan konten size. tidak perlu untuk tag script.

Jika iframe konten ini dari domain yang sama ini harus bekerja besar. Ini tidak memerlukan jQuery sekalipun.

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

Untuk mengubah ukuran secara dinamis anda bisa melakukan hal ini:

<script language="javaScript">

</script>

Kemudian pada halaman yang iframe beban tambahkan ini:

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

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

Berikut ini adalah cross-browser solusi jika anda don't 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;
}

Saya menggunakan kode ini untuk autoadjust tinggi dari semua iframe (dengan kelas autoHeight) ketika mereka beban pada halaman. Diuji dan bekerja 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();
});

Setelah saya telah mencoba segala sesuatu di bumi, ini benar-benar bekerja untuk saya.

index.html

html, body{
  width:100%;
  height:100%;
  overflow:hidden;
  margin:0px;   
}

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

Ini adalah bukti kuat solusi

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

Jika anda dapat mengontrol konten IFRAME dan jendela induk maka anda perlu iFrame Resizer.

Perpustakaan ini memungkinkan otomatis mengubah ukuran tinggi dan lebar yang sama dan cross domain iframe cocok untuk mereka yang terkandung konten. Ini menyediakan berbagai fitur untuk mengatasi masalah yang paling umum dengan menggunakan iframe, ini termasuk:

• Tinggi dan lebar ukuran iFrame untuk isi ukuran.
• Bekerja dengan beberapa dan bersarang iframe.
• Otentikasi Domain untuk cross domain iframe.
• Menyediakan berbagai ukuran halaman metode perhitungan untuk mendukung kompleks CSS layout.
• Mendeteksi perubahan DOM yang dapat menyebabkan halaman untuk mengubah ukuran menggunakan MutationObserver.
• Mendeteksi kejadian yang bisa menyebabkan halaman resize (mengubah Ukuran Jendela, CSS Animasi dan Transisi, Perubahan Orientasi dan Mouse peristiwa).
• Modern pesan antara iFrame dan host halaman melalui postMessage.
• Perbaikan pada link halaman di iFrame dan mendukung hubungan antara iFrame dan halaman induk.
• Menyediakan custom ukuran dan bergulir metode.
• Memperlihatkan orangtua posisi dan ukuran viewport untuk iFrame.
• Bekerja dengan ViewerJS untuk mendukung PDF dan dokumen ODF.
• Dukungan Fallback ke IE8.

Aku sedikit dimodifikasi Garnaph's solusi yang bagus di atas. Sepertinya solusi nya dimodifikasi iframe ukuran berdasarkan ukuran yang tepat sebelum acara. Untuk situasi saya (email pengiriman via iframe) yang saya butuhkan iframe height berubah setelah pengajuan. Misalnya menunjukkan kesalahan validasi atau "terima kasih" pesan setelah pengajuan.

Aku hanya dihilangkan bersarang klik() fungsi dan memasukkannya ke saya iframe html:

<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, tapi tidak yakin tentang fungsi lintas browser.

Berikut ini adalah beberapa metode:

DAN ALTERNATIF LAIN

UNTUK MENYEMBUNYIKAN BERGULIR DENGAN 2 ALTERNATIF SEPERTI YANG DITUNJUKKAN DI ATAS

HACK DENGAN KODE KEDUA

Untuk menyembunyikan scroll-bar iFrame, orang tua adalah membuat "overflow:hidden" untuk menyembunyikan scrollbar dan iFrame dibuat untuk pergi upto 150% lebar dan ketinggian yang memaksa scroll-bar di luar halaman dan karena tubuh doesn't memiliki scroll-bar yang satu mungkin tidak mengharapkan iframe yang akan melebihi batas halaman. Ini menyembunyikan scrollbar iFrame dengan lebar penuh!

sumber: set iframe auto tinggi

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     



</div>

Env: IE 10, Windows 7 x64

Aku tahu solusi lain setelah beberapa percobaan. Saya awalnya mencoba kode yang ditandai sebagai 'jawaban terbaik' untuk pertanyaan ini dan itu didn't bekerja. Dugaan saya adalah karena saya iframe di program saya pada saat itu adalah yang dihasilkan secara dinamis. Berikut adalah kode yang saya digunakan (ini bekerja 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';
    };

Hal ini diperlukan untuk menambahkan 4 piksel atau lebih tinggi untuk menghilangkan scroll bar (beberapa bug yang aneh/efek dari iframe). Lebar bahkan orang asing, anda aman untuk menambah 18px dengan lebar tubuh. Juga pastikan bahwa anda memiliki css untuk iframe tubuh diterapkan (di bawah).

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

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

Berikut adalah kode html untuk iframe:

Berikut adalah semua kode dalam iframe:

    <meta charset="utf-8">
    File Upload

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

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


    This is a test.<br>
    testing

Saya telah melakukan pengujian di chrome dan sedikit di firefox (windows xp). Saya masih memiliki lebih banyak pengujian yang harus dilakukan, jadi tolong katakan padaku bagaimana ini bekerja untuk anda.

Ini adalah bagaimana saya akan melakukannya (diuji di 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>

Saya menemukan ini resizer untuk bekerja 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 gaya objek dihapus.

Dalam kasus seseorang mendapatkan ke sini: Saya punya masalah dengan solusi ketika saya dihapus divs dari iframe - iframe tidak ada yang lebih pendek.

Ada sebuah plugin Jquery yang melakukan pekerjaan:

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

Dalam jQuery, ini adalah pilihan terbaik untuk saya, yang benar-benar membantu saya!! Aku menunggu bantuan anda!

iframe

jQuery

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

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

</script>

Javascript yang akan ditempatkan di header:

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

Di sini berjalan iframe html:

Css stylesheet

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

Konteks

Aku harus melakukan ini sendiri dalam konteks web-ekstensi. Web ini-ekstensi menyuntikkan beberapa bagian dari UI ke masing-masing halaman, dan UI ini hidup di dalam iframe. Kandungan di dalam iframe adalah dinamis, jadi saya harus menyesuaikan lebar dan tinggi iframe itu sendiri.

Saya menggunakan Bereaksi tapi konsep ini berlaku untuk setiap perpustakaan.

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

Dalam iframe aku berubah tubuh gaya untuk memiliki benar-benar besar dimensi. Hal ini akan memungkinkan elemen-elemen di dalam lay out menggunakan semua ruang yang diperlukan. Membuat width dan height 100% tidak't bekerja untuk saya (saya kira karena iframe memiliki default width = 300px dan height = 150px)

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

Kemudian saya disuntikkan semua iframe UI dalam sebuah div dan memberikannya beberapa gaya

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

Setelah rendering aplikasi saya dalam hal ini #ui-root (di Bereaksi saya melakukan hal ini dalam componentDidMount) aku menghitung dimensi ini div suka dan sync mereka ke halaman induk menggunakan jendela.postMessage:

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

Di induk frame 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)