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

本文提供了一种简单易懂的iframe自适应高度解决方案,适用于不同技术水平的开发者。只需修改ID名并添加特定JS代码到iframe所在页面的<body>标签内即可实现。此外,还介绍了针对动态内容及ajax加载内容的自适应调整方法。

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

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

<script language="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"οnlοad="adjustFrameSize()"

<iframe id="iframe1" onload="adjustFrameSize()" scrolling="no" src="iframe1.html"
        width="100%" height="300px" target="_self" frameborder="0">
</iframe>

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

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

//修改父窗口地址
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();

 

转载于:https://my.oschina.net/yanyaya/blog/796214

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值