Pau*_*aul 58 iframe height resize
我自己正在寻找一个简单的解决方案,用它中的内容来改变iframe的高度.
似乎规则是你不能从持有它的页面获得iframe的高度.这是因为安全性显而易见.我们应该怎么做？
Pau*_*aul 12
在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的页面.
对于该JavaScript函数,它会发送其(iframe)高度的像素数.
父窗口获取数字,向其添加32以避免滚动条,并将iframe高度设置为新数字.
就是这样,没有别的需要.
但如果你想知道一些小技巧继续阅读......
IFRAME中的动态高度？ 如果您喜欢我切换内容,iframe高度将会改变(没有页面重新加载并触发onload).我通常会在网上添加一个非常简单的切换脚本:
<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>