如何自动调整 iFrame 的大小？[复制]

StackOverflow https://stackoverflow.com/questions/247128

  •  05-07-2019
  •  | 
  •  

题

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

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

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

有帮助吗？

解决方案

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

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

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

并将其附加到使用iframe-body的 onLoad 事件运行。

其他提示

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

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

你去吧！

干杯！ ：）

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

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

首先，这适用于如下概念：如果包含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>

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

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

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

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

iframe.height = iframe.contentDocument.scrollHeight

我找到了@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 滚动条问题的 hack。该数字必须大于滚动条的大小。可以避免hack，但可以禁用iframe的滚动条。
  • 我用 setTimeout 代替 setInterval(..., 1) 以减少我的情况下的 CPU 负载

我的解决方案，（使用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>

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


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

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

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

注意：前面有一点jquery：


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

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

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的高度/宽度设置为高于CSS中任何预期的源页面大小。 background 属性为 transparent 。

在iframe中设置 allow-transparency 到 true 和滚动到 no 。

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top