我自己在寻找一个简单的解决方案来改变iframe中内容的高度。
似乎规定不能从包含它的页面获取iframe的高度,这是出于安全考虑。那么我们该怎么做呢?
在iframe中: 这意味着您需要在iframe页面中添加一些代码。 只需将此脚本添加到iframe内的代码中:
<body onload="parent.alertsize(document.body.scrollHeight);">
在占位页面中:
在容纳 iframe 的页面(在我的情况下,ID 为“myiframe”),添加一小段 JavaScript:<script>
function alertsize(pixels){
pixels+=32;
document.getElementById('myiframe').style.height=pixels+"px";
}
</script>
当 iframe 被加载时,它会触发父窗口中的 JavaScript 函数,在这种情况下,父窗口就是包含 iframe 的页面。该函数将接收 iframe 高度的像素值。<script>
function toggle(obj) {
var el = document.getElementById(obj);
if ( el.style.display != 'block' ) el.style.display = 'block';
else el.style.display = 'none';
}
</script>
在那个脚本中添加以下内容:
<script>
function toggle(obj) {
var el = document.getElementById(obj);
if ( el.style.display != 'block' ) el.style.display = 'block';
else el.style.display = 'none';
parent.alertsize(document.body.scrollHeight); // ADD THIS LINE!
}
</script>
如何使用上述脚本很简单:
<a href="javascript:toggle('moreheight')">toggle height?</a><br />
<div style="display:none;" id="moreheight">
more height!<br />
more height!<br />
more height!<br />
</div>
对于那些喜欢剪切粘贴并从那里开始的人,这是两个页面的内容。在我的情况下,它们在同一个文件夹中,但跨域也应该可以使用(我认为...)
完整的暂停页面代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>THE IFRAME HOLDER</title>
<script>
function alertsize(pixels){
pixels+=32;
document.getElementById('myiframe').style.height=pixels+"px";
}
</script>
</head>
<body style="background:silver;">
<iframe src='theiframe.htm' style='width:458px;background:white;' frameborder='0' id="myiframe" scrolling="auto"></iframe>
</body>
</html>
完整的 iframe 代码:(此 iframe 名为 "theiframe.htm")
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>IFRAME CONTENT</title>
<script>
function toggle(obj) {
var el = document.getElementById(obj);
if ( el.style.display != 'block' ) el.style.display = 'block';
else el.style.display = 'none';
parent.alertsize(document.body.scrollHeight);
}
</script>
</head>
<body onload="parent.alertsize(document.body.scrollHeight);">
<a href="javascript:toggle('moreheight')">toggle height?</a><br />
<div style="display:none;" id="moreheight">
more height!<br />
more height!<br />
more height!<br />
</div>
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
text<br />
THE END
</body>
</html>
mutationObserver
来保持 iFrame 大小与变化的内容相匹配,并使用 postMessage
来处理跨域问题。https://github.com/davidjbradshaw/iframe-resizer - Lucas<iframe onload="this.style.height=this.contentWindow.document.body.scrollHeight + 'px';" ...></iframe>
当 iframe 和父窗口在同一个域时,此方法有效。但当它们在不同的域中时则无效。