Question

可能重复：
Resizing an iframe based on content

我正在加载iFrame并希望父级根据iFrame内容的高度自动更改高度。

简而言之，所有页面都属于同一个域，因此我不应该遇到跨站点脚本问题。

Answer 1

在任何其他元素上，我会使用DOM对象的scrollHeight并相应地设置高度。我不知道这是否适用于iframe（因为它们对所有内容都有点怪异），但它确实值得一试。

编辑：浏览过后，流行的共识就是使用offsetHeight在iframe中设置高度：

function setHeight() {
    parent.document.getElementById('the-iframe-id').style.height = document['body'].offsetHeight + 'px';
}

并附加该内容以运行iframe-body的onLoad事件。

Answer 2

我刚碰到你的问题，我有一个解决方案。但它在jquery。它太简单了。

$('iframe').contents().find('body').css({"min-height": "100", "overflow" : "hidden"});
setInterval( "$('iframe').height($('iframe').contents().find('body').height() + 20)", 1 );

你去吧！

干杯！：）

编辑：如果你有基于iframe方法的富文本编辑器而不是div方法，并希望它扩展每一个新行，那么这段代码就可以满足需要。

Answer 3

这是一个死的简单解决方案，适用于每个浏览器和跨域：

首先，这适用于如下概念：如果包含iframe的html页面设置为100％的高度并且使用css将iframe设置为100％的高度，那么css将自动调整所有内容的大小。

以下是代码：

<head>
<style type="text/css"> 
html {height:100%}
body {
margin:0;
height:100%;
overflow:hidden
}
</style>
</head>

<body>
<iframe allowtransparency=true frameborder=0 id=rf sandbox="allow-same-origin allow-forms allow-scripts" scrolling=auto src="http://www.externaldomain.com/" style="width:100%;height:100%"></iframe>
</body>

Answer 4

这solution对我来说效果最好。它使用jQuery和iframe的“.load”事件。

Answer 5

在IE 5.5+中，您可以使用contentWindow属性：

iframe.height = iframe.contentWindow.document.scrollHeight;

在Netscape 6中（假设也是firefox），contentDocument属性：

iframe.height = iframe.contentDocument.scrollHeight

Answer 6

我发现@ShripadK的解决方案最有帮助，但事实并非如此工作，如果有多个iframe。我的修复是：

function autoResizeIFrame() {
  $('iframe').height(
    function() {
      return $(this).contents().find('body').height() + 20;
    }
  )
}

$('iframe').contents().find('body').css(
  {"min-height": "100", "overflow" : "hidden"});

setTimeout(autoResizeIFrame, 2000);
setTimeout(autoResizeIFrame, 10000);

$('iframe').height($('iframe').contents().find('body').height() + 20)会设置每帧的高度为相同的值，即第一帧内容的高度。所以我使用jquery的height()函数而不是值。这样个人高度计算
+ 20是解决iframe滚动条问题的黑客行为。该数字必须大于滚动条的大小。黑客可能请避免但禁用iframe的滚动条。
我使用setTimeout代替setInterval(..., 1)来减少我的情况下的CPU负载

Answer 7

我的解决方案，（使用jquery）：

<iframe id="Iframe1" class="tabFrame" width="100%" height="100%" scrolling="no" src="http://samedomain" frameborder="0" >
</iframe>  
<script type="text/javascript">
    $(function () {

        $('.tabFrame').load(function () {
            var iframeContentWindow = this.contentWindow;
            var height = iframeContentWindow.$(document).height();
            this.style.height = height + 'px';
        });
    });
</script>

Answer 8

Oli有一个适合我的解决方案。为了记录，我的iFrame中的页面是通过javascript呈现的，所以在报告offsetHeight之前我需要一个无穷小的延迟。它看起来像这样的东西：


    $(document).ready(function(){
        setTimeout(setHeight);
    });

    function setHeight() {
        alert(document['body'].offsetHeight);   
    }

Answer 9

实际上 - 帕特里克的代码也适用于我。正确的做法是：

注意：前面有一点jquery：


if ($.browser.msie == false) {
    var h = (document.getElementById("iframeID").contentDocument.body.offsetHeight);
} else {
    var h = (document.getElementById("iframeID").Document.body.scrollHeight);
}

Answer 10

我的解决方法是将iframe的高度/宽度设置为高于CSS中任何预期的源页面大小。 background属性为transparent。

在iframe中设置allow-transparency至true和scrolling至no。

唯一可见的是您使用的任何源文件。它适用于IE8，Firefox 3和＆amp; Safari浏览器。

Answer 11

这是我使用原型找到的最简单的方法：

main.html中：

<html>
<head>


<script src="prototype.js"></script>

<script>
    function init() {
        var iframe = $(document.getElementById("iframe"));
        var iframe_content = $(iframe.contentWindow.document.getElementById("iframe_content"));
        var cy = iframe_content.getDimensions().height;
        iframe.style.height = cy + "px";
    }
</script>

</head>

<body onload="init()">


<iframe src="./content.html" id="iframe" frameBorder="0" scroll="no"></iframe>

<br>
this is the next line

</body>
</html>

content.html：

<html>
<head>
<script src="prototype.js"></script>


<style>
body {
    margin: 0px;
    padding: 0px;
}
</style>


</head>

<body>


<div id="iframe_content" style="max-height:200px;">
Sub content<br>
Sub content<br>
...
...
...
</div>


</body>
</html>

这似乎在所有主流浏览器中都有用（到目前为止）。

如何自动调整iFrame的大小？

12 个答案: