iframe根据内容自动伸缩

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" οnlοad="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>
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值