64

可能重复：
根据内容调整 iframe 的大小

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

简单来说，所有页面都属于同一个域，所以我不应该遇到跨站点脚本问题。

4

12 回答 12

37

在任何其他元素上，我会使用scrollHeightDOM 对象并相应地设置高度。我不知道这是否适用于 iframe（因为它们对所有事情都有些古怪），但这当然值得一试。

编辑：环顾四周，普遍的共识是使用 iframe 设置高度offsetHeight：

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

并附加它以与 iframe-body 的onLoad事件一起运行。

于 2008-10-29T15:06:31.523 回答
14

尝试：

于 2011-09-13T12:47:34.787 回答
10

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

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

给你！

干杯! :)

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

于 2010-06-03T15:28:28.547 回答
9

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

首先，这适用于这样一个概念，即如果包含 iframe 的 html 页面设置为 100% 的高度，并且 iframe 使用 css 样式设置为具有 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>
于 2010-08-11T01:39:12.937 回答
2

这个解决方案最适合我。它使用 jQuery 和 iframe 的“.load”事件。

于 2009-03-26T18:45:07.697 回答
1

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

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

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

iframe.height = iframe.contentDocument.scrollHeight
于 2008-10-29T15:24:57.523 回答
1

我发现@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)将每一帧的高度设置为相同的值，即第一帧内容的高度。所以我使用height()带有函数而不是值的jquery。这样就可以计算出各个高度
  • + 20是解决 iframe 滚动条问题的 hack。该数字必须大于滚动条的大小。黑客可能可以避免，但禁用 iframe 的滚动条。
  • 在我的情况下，我使用setTimeout而不是setInterval(..., 1)减少 CPU 负载
于 2011-09-10T14:31:01.367 回答
1

我的解决方案，（使用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>
于 2011-10-25T12:42:54.357 回答
0

这是我使用原型发现的最简单的方法：

主要.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>

内容.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>

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

于 2011-06-17T09:05:50.280 回答
0

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


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

    function setHeight() {
        alert(document['body'].offsetHeight);   
    }
于 2008-10-29T15:21:51.867 回答
0

我的解决方法是将 iframe 的高度/宽度设置为远远超过 CSS 中任何预期的源页面大小，并将background属性设置为transparent.

在 iframe 中设置allow-transparency为true和。scrollingno

唯一可见的是您使用的任何源文件。它适用于 IE8、Firefox 3 和 Safari。

于 2010-11-06T04:33:57.630 回答
-1

实际上 - 帕特里克的代码也对我有用。正确的做法是这样的：

注意：前面有一点 jquery：


if ($.browser.msie == false) {
    var h = (document.getElementById("iframeID").contentDocument.body.offsetHeight);
} else {
    var h = (document.getElementById("iframeID").Document.body.scrollHeight);
}
于 2008-10-29T18:12:21.663 回答