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

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

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

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

步骤1：在

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";
  }
}

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

例如：

这段代码有一个小小的缺点，就是使用后iframe中的内容和外边框（如果存在外边框的话）的距离有点小，可以自己适当调整一下；另外，除IE6.0以上版本和FF以外没有测试过其它浏览器，除此之外尚未发现别的缺陷，如果在使用中发现了问题或者有更好解决方法的童鞋欢迎来分享一下。

如果在iframe页面内部含有ajax加载的页面或者通过js动态去添加内容导致iframe高度变化的情况，可以添加一下方式进行：

1：子页面添加以下内容

科威旅游管理系统

该软件是以php+MySQL进行开发的旅游管理网站系统。系统前端采用可视化布局，能自动适应不同尺寸屏幕，一起建站，不同设备使用，免去兼容性烦恼。系统提供列表、表格、地图三种列表显示方式，让用户以最快的速度找到所需行程，大幅提高效率。系统可设置推荐、优惠行程，可将相应行程高亮显示，对重点行程有效推广，可实现网站盈利。系统支持中文、英文，您还可以在后台添加新的语言，关键字单独列出，在后台即可快速翻译。

下载

//修改父窗口地址
function changeHeight(){
window.top.location.hash = "#height=" + $(document).height();
}

修改dom的部分调用该方法

2：父页面添加

//高度自适应

var iframe = document.getElementById("iframe1");
function iframeHeight() {
  var hash = window.location.hash.slice(1), h;
  if (hash && /height=/.test(hash)) {
    h = hash.replace("height=", "");
    iframe.style.height = h+"px";
    window.location.hash = "#temp";//防止点击其他页面时高度不变
  }
  setTimeout(iframeHeight, 100);
}
iframeHeight();

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

更多JS实现iframe自适应高度的方法(兼容IE与FireFox)相关文章请关注PHP中文网！