Iframe 自适应网页高度的方法(兼容多浏览器)

发布时间:2019-12-17编辑:脚本学堂
本文介绍下,iframe框架自适应其加载的网页高度的方法,可以兼容多个浏览器。有需要的朋友,参考下吧。

问题描述:
一个框架面面,包含三个页面:头,左,右三个页面。
右面的页面是主显示区会有滚动条,如何让整个框架页有滚动条,而不是单个页面出滚动条。

来看下面的代码吧。
例1,
 

复制代码 代码示例:
<html><head>
  <meta http-equiv='Content-Type' content='text/html; charset=gb2312'>
  <title>iframe 模拟 frame 使网架网页能够居中--www.jb200.com</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>

例2,用iframe模拟frame子页.htm
 

复制代码 代码示例:
<html>
<head>
  <meta http-equiv='Content-Type' content='text/html; charset=gb2312'>
 <title>iframe 自适应其加载的网页(多浏览器兼容)--www.jb200.com</title>
  <script language=javascript>
  function iframeAutoFit()
  {
    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 自适应其加载的网页(多浏览器兼容)!<br/>
    学脚本,就来脚本学堂 www.jb200.com。 <br/>
    学html教程,就来脚本学堂 html专栏。
  </span>
</body>
</html>