ปรับความกว้างและความสูงของ iframe ให้พอดีกับเนื้อหาในนั้น

ผมต้องแก้ปัญหาสำหรับรถยนต์ปรับwidthและheightของiframeที่จะแทบจะไม่พอดีกับเนื้อหา ประเด็นก็คือสามารถเปลี่ยนความกว้างและความสูงได้หลังจากที่iframeโหลดแล้ว ฉันเดาว่าฉันต้องการกิจกรรมเพื่อจัดการกับการเปลี่ยนแปลงขนาดของร่างกายที่มีอยู่ใน 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>

ปลั๊กอิน jQueryข้ามเบราว์เซอร์ปลั๊กอิน

Cross-bowser, cross domain libraryที่ใช้mutationObserverเพื่อรักษาขนาด iFrame ให้กับเนื้อหาและpostMessageเพื่อสื่อสารระหว่าง iFrame และหน้าโฮสต์ ทำงานร่วมกับหรือไม่ใช้ jQuery

โซลูชันทั้งหมดที่ได้รับนั้นนับว่าเป็นการปรับขนาดครั้งเดียวเท่านั้น คุณพูดถึงว่าคุณต้องการที่จะสามารถปรับขนาด iFrame หลังจากที่มีการปรับเปลี่ยนเนื้อหา ในการทำเช่นนี้คุณจะต้องใช้งานฟังก์ชั่นภายใน iFrame (เมื่อเนื้อหามีการเปลี่ยนแปลงคุณจะต้องเริ่มต้นเหตุการณ์เพื่อบอกว่าเนื้อหามีการเปลี่ยนแปลง)

ฉันติดอยู่กับสิ่งนี้ชั่วขณะหนึ่งเนื่องจากโค้ดภายใน iFrame ดูเหมือนถูก จำกัด อยู่ที่ DOM ภายใน iFrame (และไม่สามารถแก้ไข iFrame) และโค้ดที่ดำเนินการนอก iFrame นั้นติดอยู่กับ DOM นอก iFrame (และไม่สามารถ ' ไม่รับกิจกรรมที่มาจากภายใน iFrame)

โซลูชันมาจากการค้นพบ (ผ่านความช่วยเหลือจากเพื่อนร่วมงาน) ที่ jQuery สามารถบอกได้ว่า DOM ใช้อะไร ในกรณีนี้ DOM ของหน้าต่างพาเรนต์

ดังนั้นรหัสเช่นนี้จะทำสิ่งที่คุณต้องการ (เมื่อทำงานภายใน 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>

โซลูชันซับเดี่ยวสำหรับการฝัง: เริ่มต้นด้วยขนาดเล็กสุดและเพิ่มขนาดเนื้อหา ไม่จำเป็นต้องใช้แท็กสคริปต์

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

หากเนื้อหา iframe มาจากโดเมนเดียวกันสิ่งนี้ควรใช้งานได้ดี มันต้องการ jQuery

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

หากต้องการให้มีการปรับขนาดแบบไดนามิกคุณสามารถทำได้:

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

จากนั้นในหน้าโหลด iframe ให้เพิ่มสิ่งนี้:

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

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

นี่คือโซลูชันข้ามเบราว์เซอร์หากคุณไม่ต้องการใช้ 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;
}

หลังจากที่ฉันได้ลองทุกอย่างบนโลกนี้มันได้ผลสำหรับฉันจริงๆ

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>

ฉันใช้รหัสนี้เพื่อปรับความสูงอัตโนมัติของ iframes ทั้งหมด (พร้อมระดับความสูง AutoHeight) เมื่อพวกเขาโหลดบนหน้าเว็บ ผ่านการทดสอบและใช้งานได้ใน IE, FF, Chrome, Safari และ 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();
});

นี่เป็นวิธีการพิสูจน์ที่มั่นคง

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>

ฉันแก้ไขวิธีที่ยอดเยี่ยมของ Garnaph เล็กน้อย ดูเหมือนว่าโซลูชันของเขาจะแก้ไขขนาด iframe ตามขนาดที่เหมาะสมก่อนเหตุการณ์ สำหรับสถานการณ์ของฉัน (การส่งอีเมลผ่าน iframe) ฉันต้องการความสูง iframe เพื่อเปลี่ยนทันทีหลังจากส่ง ตัวอย่างเช่นแสดงข้อผิดพลาดในการตรวจสอบหรือข้อความ "ขอบคุณ" หลังจากส่ง

ฉันเพิ่งตัดฟังก์ชั่น click () ที่ซ้อนกันและใส่ลงใน 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>

ใช้งานได้สำหรับฉัน แต่ไม่แน่ใจเกี่ยวกับการทำงานข้ามเบราว์เซอร์

หากคุณสามารถควบคุมทั้งเนื้อหา IFRAME และหน้าต่างหลักแล้วคุณต้องiFrame Resizer

ไลบรารีนี้เปิดใช้งานการปรับขนาดความสูงและความกว้างโดยอัตโนมัติของ iFrames เดียวกันและข้ามโดเมนเพื่อให้พอดีกับเนื้อหาที่มี มันมีช่วงของคุณสมบัติในการแก้ไขปัญหาที่พบบ่อยที่สุดกับการใช้ iFrames ซึ่งรวมถึง:

• การปรับขนาดความสูงและความกว้างของ iFrame เป็นขนาดเนื้อหา
• ทำงานร่วมกับ iFrames หลายอันซ้อนกัน
• การพิสูจน์ตัวตนโดเมนสำหรับ iFrames ข้ามโดเมน
• จัดเตรียมวิธีการคำนวณขนาดหน้าเพื่อสนับสนุนโครงร่าง CSS ที่ซับซ้อน
• ตรวจจับการเปลี่ยนแปลงใน DOM ที่อาจทำให้หน้าปรับขนาดโดยใช้ MutationObserver
• ตรวจจับเหตุการณ์ที่อาจทำให้หน้าปรับขนาด (ปรับขนาดหน้าต่าง, ภาพเคลื่อนไหว CSS และการเปลี่ยน, เหตุการณ์การเปลี่ยนทิศทางและเมาส์)
• การส่งข้อความที่ง่ายขึ้นระหว่าง iFrame และหน้าโฮสต์ผ่าน postMessage
• แก้ไขในลิงค์ของหน้าใน iFrame และรองรับลิงค์ระหว่าง iFrame และหน้าหลัก
• จัดเตรียมวิธีการปรับขนาดและการเลื่อนที่กำหนดเอง
• แสดงตำแหน่งพาเรนต์และขนาดวิวพอร์ตไปยัง iFrame
• ทำงานร่วมกับ ViewerJS เพื่อรองรับเอกสาร PDF และ ODF
• สนับสนุนทางเลือกลงไปที่ IE8

ทั้งหมดไม่สามารถใช้วิธีการข้างต้นได้

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

ฉันหาวิธีแก้ปัญหาอื่นหลังจากทดลอง ฉันเคยลองใช้รหัสที่ระบุว่า 'คำตอบที่ดีที่สุด' สำหรับคำถามนี้ แต่มันก็ใช้ไม่ได้ ฉันเดาว่าเพราะ iframe ของฉันในโปรแกรมของฉันในเวลานั้นถูกสร้างขึ้นแบบไดนามิก นี่คือรหัสที่ฉันใช้ (ใช้งานได้สำหรับฉัน):

Javascript ภายใน iframe ที่กำลังโหลด:

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

จำเป็นต้องเพิ่มความสูง 4 พิกเซลขึ้นไปเพื่อลบแถบเลื่อน (ข้อผิดพลาดบางอย่าง / เอฟเฟกต์ของ iframes) ความกว้างแม้เป็นคนแปลกหน้าคุณก็ปลอดภัยที่จะเพิ่ม 18px ให้กับความกว้างของร่างกาย ตรวจสอบให้แน่ใจด้วยว่าคุณมี css สำหรับเนื้อหาของ iframe ที่ใช้ (ด้านล่าง)

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

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

นี่คือ html สำหรับ iframe:

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

นี่คือรหัสทั้งหมดใน iframe ของฉัน:

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

ฉันทำการทดสอบด้วยโครเมียมและใช้ Firefox เล็กน้อย (ใน windows xp) ฉันยังมีการทดสอบเพิ่มเติมให้ทำดังนั้นโปรดบอกฉันว่าวิธีนี้ใช้ได้ผลสำหรับคุณ

นี่คือวิธีที่ฉันจะทำ (ทดสอบใน 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>

นี่คือวิธีการหลายวิธี:

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

และอีกทางเลือกอื่น

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

เพื่อซ่อนการเลื่อนด้วย 2 ทางเลือกดังกล่าวข้างต้น

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

แฮ็คกับรหัสที่สอง

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

ในการซ่อนแถบเลื่อนของ iFrame ผู้ปกครองจะทำ "overflow: hidden" เพื่อซ่อนแถบเลื่อนและ iFrame ถูกสร้างขึ้นให้มีความกว้างและความสูงไม่เกิน 150% ซึ่งบังคับให้แถบเลื่อนอยู่ด้านนอกของหน้าและเนื่องจากร่างกายไม่ได้ ' ไม่มีแถบเลื่อนหนึ่งอาจไม่คาดว่า iframe จะเกินขอบเขตของหน้า นี่ซ่อนแถบเลื่อนของ iFrame ที่มีความกว้างเต็ม!

แหล่งที่มา: ตั้งค่าความสูงอัตโนมัติ iframe

ในกรณีที่มีคนมาที่นี่: ฉันมีปัญหากับวิธีแก้ปัญหาเมื่อฉันลบ divs ออกจาก iframe - iframe ไม่สั้นลง

มีปลั๊กอิน Jquery ที่ทำงาน:

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

ฉันพบว่าตัวปรับขนาดนี้ทำงานได้ดีขึ้น:

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;

}

หมายเหตุวัตถุสไตล์จะถูกลบออก

ใน jQuery นี่เป็นตัวเลือกที่ดีที่สุดสำหรับฉันนั่นช่วยฉันได้จริงๆ !! ฉันรอที่ช่วยคุณ!

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>

บริบท

ฉันต้องทำสิ่งนี้ด้วยตนเองในบริบทของส่วนขยายเว็บ เว็บส่วนขยายนี้อัดฉีดชิ้นส่วนบางส่วนของ UI ในแต่ละหน้าและนี้ชีวิต UI iframeภายใน เนื้อหาภายในiframeเป็นแบบไดนามิกดังนั้นฉันต้องปรับความกว้างและความสูงของiframeตัวเอง

ฉันใช้ทำปฏิกิริยาแต่แนวคิดใช้กับทุกไลบรารี

โซลูชันของฉัน (นี่ถือว่าคุณควบคุมทั้งหน้าและ iframe)

ข้างในiframeฉันเปลี่ยนbodyสไตล์ให้มีขนาดใหญ่มาก สิ่งนี้จะทำให้องค์ประกอบภายในสามารถจัดวางโดยใช้พื้นที่ที่จำเป็น การสร้างwidthและheight100% ไม่ได้ผลสำหรับฉัน (ฉันเดาว่าเพราะ iframe มีค่าเริ่มต้นwidth = 300pxและheight = 150px)

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

จากนั้นฉันก็ฉีด iframe UI ทั้งหมดภายใน div และให้สไตล์กับมัน

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

หลังจากแสดงแอพของฉันภายในนี้#ui-root(ในการตอบสนองฉันทำสิ่งนี้ภายในcomponentDidMount) ฉันคำนวณขนาดของ div นี้เช่นและซิงค์กับเพจระดับบนโดยใช้window.postMessage:

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

ในเฟรมหลักฉันทำอะไรแบบนี้:

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)

เป็นไปได้ที่จะสร้าง IFrame "เหมือนผี" ที่ทำหน้าที่เหมือนไม่อยู่ที่นั่น

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

โดยทั่วไปคุณใช้ระบบเหตุการณ์ที่parent.postMessage(..)อธิบายไว้ใน https://developer.mozilla.org/en-US/docs/DOM/window.postMessage

มันใช้งานได้กับเบราว์เซอร์ที่ทันสมัยทั้งหมด!

ฉันรู้ว่าโพสต์เก่า แต่ฉันเชื่อว่านี่เป็นอีกวิธีหนึ่งที่จะทำ ฉันเพิ่งติดตั้งโค้ดของฉัน ทำงานได้อย่างสมบูรณ์ทั้งในการโหลดหน้าและปรับขนาดหน้า:

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

จาวาสคริปต์ที่จะวางในส่วนหัว:

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

นี่คือโค้ด HTML ของ iframe:

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

สไตล์ชีท Css

>

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

สำหรับแอตทริบิวต์คำสั่ง 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';
        } );
    }
};
} );

สังเกตเปอร์เซ็นต์ผมใส่ไว้เพื่อที่คุณจะสามารถปรับขนาดได้ตามปกติสำหรับ iframe, ข้อความ, โฆษณา ฯลฯ เพียงแค่ใส่ 0 ถ้าไม่มีการปรับสเกล

นี่คือวิธีที่ฉันทำมันโหลดหรือเมื่อมีการเปลี่ยนแปลง

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

เห็นได้ชัดว่ามีสถานการณ์มากมาย แต่ฉันมีโดเมนเดียวกันสำหรับเอกสารและ iframe และฉันสามารถที่จะทำสิ่งนี้ต่อท้ายเนื้อหา iframe ของฉัน:

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

นี่เป็น 'ค้นหา' พาเรนต์คอนเทนเนอร์แล้วตั้งค่าความยาวที่เพิ่มขึ้นบนปัจจัยเหลวไหลของ 50 พิกเซลเพื่อลบแถบเลื่อน

ไม่มีสิ่งใดที่จะ 'สังเกต' การเปลี่ยนแปลงความสูงของเอกสารนี่คือสิ่งที่ฉันไม่ต้องการสำหรับกรณีการใช้งานของฉัน ในคำตอบของฉันฉันจะนำวิธีการอ้างอิงคอนเทนเนอร์หลักโดยไม่ต้องใช้รหัสอบในเนื้อหาหลัก / iframe

หากคุณสามารถอยู่กับอัตราส่วนคงที่และคุณต้องการiframe ตอบสนองรหัสนี้จะเป็นประโยชน์กับคุณ มันเป็นแค่กฎ 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 ต้องมี div เป็นคอนเทนเนอร์

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

ซอร์สโค้ดอิงตามไซต์นี้และBen Marshallมีคำอธิบายที่ดี

ความเรียบง่าย:

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

หากเนื้อหาเป็นเพียง html ที่เรียบง่ายวิธีที่ง่ายที่สุดคือการลบ iframe ด้วย javascript

รหัส HTML:

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

รหัส 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>