基于内容动态设置iframe高度- JQUERY/Javascript
我在一个iframe中加载一个aspx网页。Iframe中的内容可以比iframe的高度更高。iframe不应该有滚动条。
我在iframe中有一个包装器div标签，基本上就是所有的内容。我写了一些jQuery来调整大小：
$("#TB_window", window.parent.document).height($("body").height() + 50);其中TB_window是包含Iframe的div。
body - iframe中aspx的主体标签。
此脚本附加到iframe内容。我从父页面获取TB_window元素。虽然这在Chrome上运行得很好，但TB_window在火狐上就崩溃了。我真的很困惑/迷失了为什么会这样。
回答 18
Stack Overflow用户
发布于 2012-02-07 00:05:14
您可以使用：contentWindow.document.body.scrollHeight检索IFRAME内容的高度
加载IFRAME后，您可以通过执行以下操作更改高度：
<script type="text/javascript">
function iframeLoaded() {
var iFrameID = document.getElementById('idIframe');
if(iFrameID) {
// here you can make the height, I delete it first, then I make it again
iFrameID.height = "";
iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
}
}
</script> 然后，在IFRAME标记上，像这样挂接处理程序：
<iframe id="idIframe" onload="iframeLoaded()" ...不久前，我遇到过这样一种情况:在中发生表单提交后，我还需要从IFRAME本身调用iframeLoaded。您可以通过在IFRAME的内容脚本中执行以下操作来完成此操作：
parent.iframeLoaded();Stack Overflow用户
发布于 2014-04-12 02:26:47
我发现接受的答案还不够，因为X-FRAME-OPTIONS: Allow-From isn't supported in safari or chrome。取而代之的是一种不同的方法，在Disqus的Ben Vinegar给出的presentation中找到了。这个想法是向父窗口添加一个事件侦听器，然后在iframe中，使用window.postMessage向父窗口发送一个事件，告诉它做一些事情(调整iframe的大小)。
因此，在父文档中，添加一个事件侦听器：
window.addEventListener('message', function(e) {
var $iframe = jQuery("#myIframe");
var eventName = e.data[0];
var data = e.data[1];
switch(eventName) {
case 'setHeight':
$iframe.height(data);
break;
}
}, false);在iframe中，编写一个函数来发布消息：
function resize() {
var height = document.getElementsByTagName("html")[0].scrollHeight;
window.parent.postMessage(["setHeight", height], "*");
}最后，在iframe内，将onLoad添加到body标记以触发调整大小函数：
<body onLoad="resize();">Stack Overflow用户
发布于 2015-04-22 22:51:48
将这段代码添加到iframe中，这对我很有效：
onload="this.height=this.contentWindow.document.body.scrollHeight;"如果你使用jQuery，试试下面的代码：
onload="$(this).height($(this.contentWindow.document.body).find(\'div\').first().height());"https://stackoverflow.com/questions/9162933
复制相似问题