您的位置：首页 > 其它

iFrame高度自适应解决方案

2012-06-14 14:04 253 查看

web开发的工作中我们难免会遇到使用iFrame这个标签，有时候iFrame的高度我们要让它自动的去适应内容的高度，防止出现滚动条，利于页面的美化。这里示例个使用JavaScript使iFrame自动适应高度的方法。

Default页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>iframe如何在页面中使用JS自定义高度</title>
</head>
<body>
<div>
<ul>
<li>ifrmae要在下面的li标签里自动适应高度</li>
<li>
<iframe id="myFrame" frameborder="0" marginheight="0" marginwidth="0" src="myI.aspx">
</iframe>
</li>
</ul>
</div>
</body>
</html>

子页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>这个页面是要嵌入Default.aspx的子页面</title>
</head>
<body>
<form id="form1" runat="server">
<div style="height: 300px; width: 400px; border: 1px dashed #000;">
这个DIV高300宽400
</div>
</form>
</body>
</html>

看到Default页面里的IFrame高度都没有设定。

<script type="text/javascript">
//获得ID为DIVr的标签高和宽
var h = document.getElementById("div").offsetHeight;
var w = document.getElementById("div").offsetWidth;
//获得父页面的iFrame标签
var iframe = window.parent.document.getElementById("myFrame");
iframe.style.width = w + "px";
iframe.style.height = h + "px";
</script>

在default页面写一个function

例如

Function helloword(){

Alert('您好');

}

子页面调用方法

Window.parent.helloword();

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航