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

我需要一个自动调整iframe的宽度和高度的解决方案，以勉强适应其内容。关键是宽度和高度可以在iframe加载后改变。我想我需要一个事件动作来处理iframe中包含的主体尺寸的变化。

当前回答

嵌入式的一行程序解决方案: 从最小大小开始，增加到内容大小。不需要脚本标记。

2015-07-20 09:38:18

其他回答

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

2009-05-04 09:33:39

经过一番试验，我想出了另一个解决办法。我最初尝试了标记为“最佳答案”的代码来回答这个问题，但它不起作用。我的猜测是因为当时程序中的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个或更多像素来移除滚动条(一些奇怪的bug/ iframes的效果)。宽度更奇怪，你可以安全地添加18px的宽度的主体。还要确保应用了iframe主体的css(如下所示)。

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

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

下面是iframe的html:

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

我在chrome和firefox (windows xp)中做过一些测试。我还有更多的测试要做，所以请告诉我这是如何为你工作的。

2015-06-17 04:08:51

跨浏览器jQuery插件。

cross -bowser, cross - domain library，使用mutationObserver来保持iFrame的大小与内容一致，使用postMessage在iFrame和主机页面之间进行通信。使用或不使用jQuery。

2010-10-04 09:09:33

可以创建一个“幽灵般的”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

这适用于所有现代浏览器!

2013-02-22 13:03:03

在我试遍了世界上所有的方法之后，这个方法真的很适合我。

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>

2016-04-07 15:18:38

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

推荐文章

最新文章

标签