我在 iframe 中有一些 javascript，它使用 Resizing an iframe based on content 处的三帧技术将 iframe 主体的高度发送到父页面。
iframe 主体的高度似乎始终为 900，即 iframe 的视口(viewport)高度。这在不同浏览器中是一致的。
iframe:
<iframe id="printiq" src="http://myurl.com" height="900px" width="980px">Your browser does not support iframes.</iframe>
iframe 内的脚本:
$(window).load(function() {
var height = document.body.scrollHeight + 60;
alert('Height: ' + height); //Always returns 900, the height of the iframe
var whirlwind_url = 'http://whirlwind.ben.dev/iframe_helper';
var iframe_html = '<iframe id="height_helper" src="'+whirlwind_url+'?height='+height+'"></iframe>';
$('body').append(iframe_html);
});
奇怪的是，当我用 firebug 检查 DOM 时，没有任何高度变量(scrollHeight、offsetHeight 等)设置为 900。
最佳答案
问题是 iframe 页面上的 div 扩展到视口(viewport)的高度。我通过更改 css 修复了它。
这是我最终得到的代码。
父窗口。
function resizeIframe(height) {
height = parseInt(height) + 60;
$('iframe#printiq').attr('height', height);
}
iframed 外部站点的脚本。
$(window).load(function() {
var height = $('#container').height() + $('#header').height();
var whirlwind_url = 'http://whirlwind.ben.dev/iframe_helper';
var iframe_html = '<iframe id="height_helper" src="'+whirlwind_url+'?height='+height+'"></iframe>';
$('body').append(iframe_html);
});
iframe 帮助程序，嵌入到 iframe 中。如果您愿意，可以是浏览器窗口的孙子。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--
This page is on the same domain as the parent, so can
communicate with it to order the iframe window resizing
to fit the content
-->
<body onload="parentIframeResize()">
<style type="text/css">
body{
border:none;
display:none;
}
</style>
<script>
// Tell the parent iframe what height the iframe needs to be
function parentIframeResize()
{
var height = getParam('height');
// This works as our parent's parent is on our domain..
parent.parent.resizeIframe(height);
}
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
// Helper function, parse param from request string
function getParam( name )
{
var results = getUrlVars();
if( results == null )
return "";
else
return results['height'];
}
</script>
</body>
</html>
关于javascript - IFrame 文档高度返回 IFrame 高度而不是实际高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3191009/