iframe自动适应内容的高度

本文介绍了两种实现IFrame自适应高度的方法。一种通过JavaScript表达式设置IFrame的高度,另一种利用JavaScript函数动态调整IFrame高度。文章还展示了如何确保页面加载完成后执行高度调整。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

方法一:

<script>
function autoResize()
{
try
{
document.all["mainFrame"].style.height=mainFrame.document.body.scrollHeight
}
catch(e){}
}
</script>
<iframe name="mainFrame" src="/ads/?ad=google&ad2=biz2008" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" width="100%" style="height:expression(1); aho:expression(autoResize())"></iframe>

方法二:

<iframe src="comment.jsp"  id="mainFrame" name="mainFrame" style="margin:20px 0;width:95%;height:600px;"  border="0" frameborder="0"  marginwidth="0" marginheight="0" allowtransparency="yes" ></iframe>

 

  <script>
    function iframeResize()
     {
      var dyniframe = document.getElementById("mainFrame");


      if (dyniframe) {
       if (dyniframe.contentDocument)
       {
        dyniframe.style.height = dyniframe.contentDocument.body.scrollHeight + 10;
       }
       else if (dyniframe.document && dyniframe.document.body.scrollHeight)
       {
        iframeheight = mainFrame.document.body.scrollHeight + 10;
        dyniframe.style.height = iframeheight;
       }
      }
     }

     function scroll_to_top()
     {
      document.body.scrollTop=0;
     }

     if (window.addEventListener)
      window.addEventListener("load", iframeResize, false);
     else if (window.attachEvent)
      window.attachEvent("onload", iframeResize);
     else
      window.onload = iframeResize;
     </script>

 

网页在最上面:

<script language="javascript">if(self!=top){top.location=self.location;};self.moveTo(0,0);self.resizeTo(screen.availWidth,screen.availHeight); </script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值