我有一个帮助页面，help.php，我在main.php中的iframe中加载。如果在iframe中加载了这个页面，我怎么能得到这个页面的高度？
我问这个是因为我无法将iframe的高度设置为100％或auto。这就是为什么我认为我需要使用javascript ..我正在使用jQuery
CSS：
body {
margin: 0;
padding: 0;
}
.container {
width: 900px;
height: 100%;
margin: 0 auto;
background: silver;
}
.help-div {
display: none;
width: 850px;
height: 100%;
position: absolute;
top: 100px;
background: orange;
}
#help-frame {
width: 100%;
height: auto;
margin:0;
padding:0;
}
JS：
$(document).ready(function () {
$("a.open-help").click(function () {
$(".help-div").show();
return false;
})
})
HTML：
<div class='container'>
<!-- -->
<div class='help-div'>
<p>This is a div with an iframe loading the help page</p>
<iframe id="help-frame" src="../help.php" width="100%" height="100%" frameborder="1"></iframe>
</div> <a class="open-help" href="#">open Help in iFrame</a>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
</div>
好吧我终于找到了一个好的解决方案
$('iframe').load(function() {
this.style.height =
this.contentWindow.document.body.offsetHeight + 'px';
});
因为一些浏览器（较旧的Safari和Opera）报告onload在CSS渲染之前完成，你需要设置一个微超时并空白并重新分配iframe的src。
$('iframe').load(function() {
setTimeout(iResize, 50);
// Safari and Opera need a kick-start.
var iSource = document.getElementById('your-iframe-id').src;
document.getElementById('your-iframe-id').src = '';
document.getElementById('your-iframe-id').src = iSource;
});
function iResize() {
document.getElementById('your-iframe-id').style.height =
document.getElementById('your-iframe-id').contentWindow.document.body.offsetHeight + 'px';
}
较简单的答案是使用.contents()来获取iframe。有趣的是，我相信，由于身体上的填充，它返回的值与我在原始答案中使用代码的值不同。
$('iframe').contents().height() + 'is the height'
这就是我为跨域通信所做的工作，所以我担心它可能会不必要地复杂化。首先，我将jQuery放在iFrame的文档中;这将消耗更多内存，但它不应该增加加载时间，因为脚本只需要加载一次。
使用iFrame的jQuery尽可能早地测量iframe体的高度（onDOMReady），然后将URL哈希值设置为该高度。在父文档中，将onload事件添加到iFrame标记，该标记将查看iframe的位置并提取您需要的值。因为onDOMReady将始终在文档的加载事件之前发生，所以您可以相当确定该值将正确传达，而不会出现竞争条件使事情复杂化。
换一种说法：
...在Help.php中：
var getDocumentHeight = function() {
if (location.hash === '') { // EDIT: this should prevent the retriggering of onDOMReady
location.hash = $('body').height();
// at this point the document address will be something like help.php#1552
}
};
$(getDocumentHeight);
......并在父文件中：
var getIFrameHeight = function() {
var iFrame = $('iframe')[0]; // this will return the DOM element
var strHash = iFrame.contentDocument.location.hash;
alert(strHash); // will return something like '#1552'
};
$('iframe').bind('load', getIFrameHeight );
我发现以下内容适用于Chrome，Firefox和IE11：
$('iframe').load(function () {
$('iframe').height($('iframe').contents().height());
});
完成Iframes内容后，将触发该事件，并将IFrames高度设置为其内容的高度。这仅适用于与IFrame相同的域中的页面。
在iframe中你不需要jquery来做这件事，但是我使用它会导致代码变得如此简单......
将它放在iframe中的文档中。
$(document).ready(function() {
parent.set_size(this.body.offsetHeight + 5 + "px");
});
在上面添加了五个以消除小窗口上的滚动条，它在尺寸上永远不会完美。
这在你的父文档中。
function set_size(ht)
{
$("#iframeId").css('height',ht);
}
没有jQuery这样做的代码现在是微不足道的：
const frame = document.querySelector('iframe')
function syncHeight() {
this.style.height = `${this.contentWindow.document.body.offsetHeight}px`
}
frame.addEventListener('load', syncHeight)
解开事件：
frame.removeEventListener('load', syncHeight)
这是对我有用的正确答案
$(document).ready(function () {
function resizeIframe() {
if ($('iframe').contents().find('html').height() > 100) {
$('iframe').height(($('iframe').contents().find('html').height()) + 'px')
} else {
setTimeout(function (e) {
resizeIframe();
}, 50);
}
}
resizeIframe();
});
接受的答案$('iframe').load现在将产生a.indexOf is not a function错误。可以更新为：
$('iframe').on('load', function() {
// ...
});
自jQuery 1.8以来，很少有类似于.load的人被弃用："Uncaught TypeError: a.indexOf is not a function" error when opening new foundation project
简单的单行开始于默认的最小高度并增加到内容大小。
<iframe src="http://url.html" onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+"px";}(this));' style="height:200px;width:100%;border:none;overflow:hidden;"></iframe>