Iframe 自适应其加载的网页高度(多浏览器兼容版)

最新推荐文章于 2023-12-04 15:07:47 发布

xdfwsl

最新推荐文章于 2023-12-04 15:07:47 发布

阅读量1.7k

点赞数

分类专栏： javascript 文章标签： iframe 浏览器 microsoft javascript internet html

本文链接：https://blog.youkuaiyun.com/xdfwsl/article/details/984398

版权

javascript 专栏收录该内容

13 篇文章

订阅专栏

Iframe 自适应其加载的网页高度(多浏览器兼容版)

from meizz
如何在打开这个页面时得到这个页面的高度？
一个框架面面，包含三个页面
头，左，右三个页面
右面的页面是主显示区会有滚动条，如何让整个框架页有滚动条，而不是单个页面出滚动条。
---------------------------------------------------------------

<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=gb2312'>
<meta name='author' content='F.R.Huang(meizz梅花雪)//www.meizz.com'>
<title>用 iframe 模拟 frame 使网架网页能够居中</title>
</head>

<body topmargin=0 leftmargin=0><center>
<table border=0 width=780 height=100% cellspacing=0 cellpadding=0 align=center>
<tr><td width=780 colspan=2 height=100>
<iframe width=100% height=100% frameborder=1></iframe>
</td></tr>
<tr>
<td width=180>
<iframe width=100% height=100% frameborder=1></iframe>
</td>
<td width=600 valign=top><div style="height: 100%">
<iframe width=100% height=100% name="MzMain" frameborder=1
id="MzMain" src="用iframe模拟frame子页.htm"></iframe>
</div></td>
</tr>
</table>
</center></body></html>

用iframe模拟frame子页.htm
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=gb2312'>
<meta name='author' content='F.R.Huang(meizz梅花雪)//www.meizz.com'>
<title>iframe 自适应其加载的网页(多浏览器兼容)</title>
<script language=javascript>
function iframeAutoFit() //author: meizz(梅花雪 20041225)
{
if(self!=top && window.name=="MzMain") //这个 name 对应的是 iframe 的 name
{
var iframe = parent.document.getElementById(window.name);
if(iframe)
{
iframe.parentNode.style.height = iframe.style.height;
iframe.style.height = 10;
var h = document.body.scrollHeight;
var minimalHeight = parseInt((window.screen.width*11)/16, 10) - 280;
h = h<minimalHeight ? minimalHeight : h;
if(window.navigator.appName == "Microsoft Internet Explorer"
&& iframe.frameBorder=="1") h += 4;
iframe.parentNode.style.height = iframe.style.height = h;
}
else alert("Iframe's id unequal to iframe's name!");
}
}
if(document.attachEvent) window.attachEvent("onload", iframeAutoFit);
else window.addEventListener('load', iframeAutoFit, false);
</script>
</head>
<body>
<span style="width: 300; height: 400; background-color: yellow">
iframe 自适应其加载的网页(多浏览器兼容)
</span>
</body>
</html>

这是另一种：
<span id="ospan">
<iframe width="100%" height="100%" id="message_group" src="link_message.html" frameBorder=0 οnlοad="ospan.style.height=message_group.document.body.scrollHeight;"><br>
</iframe>
</span>