当前位置:首页 前端开发 正文

iframe根据内容自动伸缩

2011年07月23日 | 作者: 米豆网 - 1000seo | 分类: 前端开发 | 

iframe,尤其是不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行。
======================方法1======================

function SetCwinHeight()
{
var cwin=document.getElementById(“cwin”);
if (document.getElementById)
{
if (cwin && !window.opera)
{
if (cwin.contentDocument && cwin.contentDocument.body.offsetHeight)
cwin.height = cwin.contentDocument.body.offsetHeight;
else if(cwin.Document && cwin.Document.body.scrollHeight)
cwin.height = cwin.Document.body.scrollHeight;
}
}
}

最后,加入iframe,不能丢掉onload属性,当然了,id也必须也函数中的cwin匹配

<iframe width=”778″ align=”center” height=”200″ id=”cwin” name=”cwin” onload=”Javascript:SetCwinHeight()” frameborder=”0″ scrolling=”no”></iframe>
====================方法2======================
文件temp.htm
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>
</head>
<body onLoad=parent.setSize(getSize())>
<table width=”100″ height=”660″ border=”0″ cellpadding=”0″ cellspacing=”0″ bgcolor=”#FFCC66″>
<tr>
<td>&nbsp;</td>
</tr>
</table>
<div id=PageEnd style=”position:relative”></div>
<script language=”JavaScript”>
function getSize(){
return document.getElementById(“PageEnd”).offsetTop
}
</script>
</body>
</html>
文件test.htm
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>
</head>
<body bgcolor=”#FFFFFF” text=”#000000″>
<script language=”JavaScript” type=”text/JavaScript”>
function setSize(theHeight){
document.all.ifrm.height=theHeight+12;
}
</script>
<iframe id=ifrm width=”100%” height=”0px” scrolling=”no” src=”temp.htm”></iframe>
</body>
</html>
本文章由 米豆网 - 1000seo 于2011年07月23日发布在前端开发分类下,您可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
+复制链接 转载请注明:iframe根据内容自动伸缩-米豆网
关键字:,

好文章就要一起分享!

更多

发表评论

你的大名(必填)

你的邮箱(必填)

你的网站(选填)

评论内容(必填)

😉 😐 😡 😈 🙂 😯 🙁 🙄 😛 😳 😮 mrgreen.png 😆 💡 😀 👿 😥 😎 ➡ 😕 ❓ ❗