JS实现iframe自适应高度的方法(兼容IE与FireFox)

内容摘要

本文实例讲述了JS实现iframe自适应高度的方法。分享给大家供大家参考，具体如下：
之前一直被iframe自适应高度的问题困扰，很多JS代码在FF里面似乎就变成哑巴了。后来下面这段代

文章正文

本文实例讲述了JS实现iframe自适应高度的方法。分享给大家供大家参考，具体如下：

之前一直被iframe自适应高度的问题困扰，很多JS代码在FF里面似乎就变成哑巴了。后来下面这段代码终于被我从万千号称兼容FF的代码堆中翻了出来。我已经用过了，真的好用。尤其是对于我这样的JS水平较低（真不好意思）的人来说，这段代码简单易懂，方便修改，只要把下面的代码复制粘贴到iframe所在页面的<body>标签里面，并且修改一下ID名就行了（注意，要修改的地方有两个，位置在代码中有说明）。

向原创这段代码的朋友致敬。

步骤1：在<body>标签下先输入如下JS代码

<scriptlanguage="javascript">
function adjustFrameSize()
{
  var frm = document.getElementById("iframe1"); //将iframe1替换为你的ID名
  var subWeb = document.frames ? document.frames["iframe1"].document : frm.contentDocument;
  if(frm != null && subWeb !=null)
  {
   frm.style.height="0px";//初始化一下,否则会保留大页面高度
   frm.style.height = subWeb.documentElement.scrollHeight+"px";
   frm.style.width = subWeb.documentElement.scrollWidth+"px";
   subWeb.body.style.overflowX="auto";
   subWeb.body.style.overflowY="auto";
  }
}
</script>

步骤2：在iframe标签中加上id="iframe1"onload="adjustFrameSize()"

例如：

JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

代码注释

上一篇 Android编程开发之seekBar采用handler消息处理操作的方法下一篇 JS HTML5拖拽上传图片预览

作者：喵哥笔记

学的不仅是技术，更是梦想！