如何自动调整iFrame的大小?

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

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

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

在任何其他元素上,我将使用DOM对象的scrollHeight并相应地设置高度。 我不知道这是否可以在iframe上工作(因为他们对所有的事情都有些奇怪),但是肯定值得一试。

编辑:经过四处看看,stream行的共识是使用offsetHeight从iframe中设置高度:

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

并附上与iframe-body的onLoad事件一起运行。

尝试:

  • jQuery的iframe的自动高度
  • iframe的大小调整

我碰巧遇到你的问题,我有一个解决scheme。 但它在jQuery中。 它太简单了。

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

你走了!

干杯! 🙂

编辑:如果你有一个基于iframe方法的富文本编辑器,而不是div方法,并希望它扩大每一个新的行,那么这段代码将做必要的。

这是一个简单的解决scheme,适用于所有浏览器和跨域:

首先,这个概念的工作原理是,如果包含iframe的html页面被设置为100%的高度,iframe的样式使用css的高度为100%,那么css会自动resize以适应所有的事情。

这里是代码:

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

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

在IE 5.5+中,你可以使用contentWindow属性:

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

在Netscape 6中(假设使用firefox),contentDocument属性:

 iframe.height = iframe.contentDocument.scrollHeight 

我发现@ShripadK的解决scheme最有帮助,但如果存在多个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)来减lessCPU负载

奥利有一个解决scheme,将为我工作。 为了logging,我的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> 

这似乎在所有主stream浏览器中都有效。

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

在iframe中设置allow-transparencytruescrollingno

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

我的解决scheme,(使用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>