Javascript 调整iframe的宽度和高度以适应其中的内容

我需要一个解决方案，用于自动调整

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>

函数resizeIFrameToFitContent（iFrame）{
iFrame.width=iFrame.contentWindow.document.body.scrollWidth；
iFrame.height=iFrame.contentWindow.document.body.scrollHeight；
}
window.addEventListener（'DOMContentLoaded'，函数（e）{
var iFrame=document.getElementById（'iFrame1'）；
调整iFrameToFitContent（iFrame）的大小；
//或者，要调整所有iFrame的大小：
var iframes=document.querySelectorAll（“iframe”）；
对于（var i=0；i
跨浏览器

跨bowser，跨域，它使用
mutationObserver
使iFrame的大小与内容保持一致，并使用
postMessage
在iFrame和主机页之间进行通信。使用或不使用jQuery。
如果您不想使用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;
}

迄今为止给出的所有解决方案都只考虑一次性调整大小。您提到希望能够在修改内容后调整iFrame的大小。为了做到这一点，您需要在iFrame中执行一个函数（一旦内容发生更改，您需要触发一个事件来说明内容已经更改）

我被这个问题困扰了一段时间，因为iFrame内部的代码似乎仅限于iFrame内部的DOM（并且无法编辑iFrame），而在iFrame外部执行的代码被iFrame外部的DOM所困扰（并且无法拾取来自iFrame内部的事件）

解决方案来自于发现（通过同事的帮助）可以告诉jQuery使用什么DOM。在本例中，父窗口的DOM

因此，这样的代码满足您的需要（在iFrame中运行时）：


jQuery（文档）.ready（函数（）{
jQuery（“IDofControlFiringResizeEvent”）。单击（函数（）{
var frame=$（'#idofframeinMainWindow'，window.parent.document）；
var height=jQuery（“#IDofContainerInsideiFrame”）.height（）；
框架高度（高度+15）；
});
});
我稍微修改了上面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>


jQuery（文档）.ready（函数（）{
var frame=$（'#idofframeinMainWindow'，window.parent.document）；
var height=jQuery（“#IDofContainerInsideiFrame”）.height（）；
框架高度（高度+15）；
});

为我工作，但不确定跨浏览器功能。
如果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>


函数resize（）
{
window.parent.autoResize（）；
}
$（窗口）。打开（'调整大小'，调整大小）；
我使用此代码在页面上加载所有iFrame时自动调整其高度（使用类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();
});

可以制作一个“幽灵般”的IFrame，使其看起来好像不存在一样

看

基本上，您使用中描述的事件系统
parent.postMessage（..）

这适用于所有现代浏览器
 我会这样做（在FF/Chrome中测试）：


函数自动调整大小（iframe）{
$（iframe）.height（$（iframe.contents（）.find（'html'）.height（））；
}
以下是几种方法：

<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的全宽滚动条

资料来源：set
这是一个可靠的解决方案

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>

所有这些方法都无法使用

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:


高宽

环境：IE 10，Windows 7 x64
我发现这个大小调整器工作得更好：

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;

}

注意，样式对象已被删除。
如果有人来到这里：
当我从iframe中删除div时，我遇到了一个问题，iframe没有变短

有一个Jquery插件可以完成这项工作：

经过一些实验，我想出了另一个解决方案。我最初尝试了这个问题的“最佳答案”代码，但没有成功。我的猜测是因为当时程序中的iframe是动态生成的。以下是我使用的代码（它对我有用）：

正在加载的iframe中的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';
    };

有必要在高度上添加4个或更多像素，以删除滚动条（iFrame的一些奇怪错误/效果）。宽度更奇怪，你可以在身体的宽度上增加18px。还要确保应用了iframe主体的css（如下所示）

以下是iframe的html：

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



下面是我的
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;

}

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

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

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

<iframe id="fileUploadIframe" src="php/upload/singleUpload.html"></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>

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

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

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

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

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

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

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

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

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

</script>

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

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

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

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

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

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

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)

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

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

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

function resizeIFrameToFitContent(frame) {
if (frame == null) {
    return true;
}

var docEl = null;
var isFirefox = navigator.userAgent.search("Firefox") >= 0;

if (isFirefox && frame.contentDocument != null) {
    docEl = frame.contentDocument.documentElement;
} else if (frame.contentWindow != null) {
    docEl = frame.contentWindow.document.body;
}

if (docEl == null) {
    return;
}

var maxWidth = docEl.scrollWidth;
var maxHeight = (isFirefox ? (docEl.offsetHeight + 15) : (docEl.scrollHeight + 45));

frame.width = maxWidth;
frame.height = maxHeight;
frame.style.width = frame.width + "px";
frame.style.height = frame.height + "px";
if (maxHeight > 20) {
    frame.height = maxHeight;
    frame.style.height = frame.height + "px";
} else {
    frame.style.height = "100%";
}

if (maxWidth > 0) {
    frame.width = maxWidth;
    frame.style.width = frame.width + "px";
} else {
    frame.style.width = "100%";
}
}

.myIFrameStyle {
   float: left;
   clear: both;
   width: 100%;
   height: 200px;
   padding: 5px;
   margin: 0px;
   border: 1px solid gray;
   overflow: hidden;
}

<iframe id="myIframe" src="" class="myIFrameStyle"> </iframe>

<script type="text/javascript">
   $(document).ready(function () {
      $('myIFrame').load(function () {
         resizeIFrameToFitContent(this);
      });
    });
</script>