如何自动调整iFrame的大小？

可能重复：
Resizing an iframe based on content 如何自动调整iFrame的大小？

我加载一个iframe，希望家长能够自动改变基于IFrame的内容的高度高度。

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

2008-10-29 Allan

这里是最好的解决方案 - http://stackoverflow.com/questions/5867985/iframe-100-height – 2013-06-27 12:24:06

更新的答案，这给出了一系列选项 - http：// stackoverflow。com/questions/14334154/iframe-auto-adjust-height-as-content-changes – 2014-06-09 23:19:39

在任何其他元素上，我会使用DOM对象的scrollHeight并相应地设置高度。我不知道这是否可以在iframe上工作（因为他们对所有事情都有点诡异），但这当然值得一试。

编辑：有过环顾四周，在全民的共识，从iframe中使用offsetHeight设置高度：

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

，并附上与iframe的身体onLoad事件上运行。

来源

2008-10-29 15:06:31 Oli

这不适合我。要明确，应该在IFRAME HTML中定义setHeight（）吗？但是-iframe-id是在主页html中定义的iframe的id？ – AP257 2010-10-01 19:50:25

是的，在IE中也不能很好地工作......它只是在浏览器高度上变大。 – Entity 2011-06-23 00:17:35

添加+ - 60像素的偏移量确保滚动条不可见（不同的浏览器）并不是一个坏主意。 – thomasvdb 2011-09-26 08:40:42

奥利有一个解决方案，将为我工作。为了记录，我的iFrame中的页面由javascript呈现，所以在报告offsetHeight之前我需要无限小的延迟。它看起来像这些方针的东西：


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

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

来源

2008-10-29 15:21:51 Allan

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

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

在Netscape 6（假设火狐也一样），contentDocument属性：

iframe.height = iframe.contentDocument.scrollHeight

来源

2008-10-29 15:24:57

实际上 - 帕特里克的代码也适用于我。正确的方式做这将是沿着这一行：

注：有一点的jQuery的未来：


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

来源

2008-10-29 18:12:21 Allan

这solution工作最适合我。它使用jQuery和iframe的“.load”事件。

来源

2009-03-26 18:45:07 craigmoliver

我只是碰巧遇到你的问题，我有一个解决方案。但它在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-03 15:28:28

这里是一条走不通的简单的解决方案，在每一个浏览器和交叉领域的工作：

首先，这个工程上，如果包含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-11 01:39:12 Sky

我的解决方法是设置iframe的高度/宽度以及任何预期的源页面尺寸过大的CSS &的background属性transparent。

在iframe集allow-transparency到true和scrolling到no中。

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

来源

2010-11-06 04:33:57 Gale

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

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>

这似乎是工作（到目前为止）在所有主流浏览器。

来源

2011-06-17 09:05:50

我发现解决方案通过@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负荷

来源

2011-09-10 14:31:01 geekQ

尝试：

来源

2011-09-13 12:47:34 xmedeko

我的解决方案，（使用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-25 12:42:54 iknowitwasyoufredo

如何自动调整iFrame的大小？

回答

相关问题