iframe自适应高度终极解决方案

话说,每一个大半夜与一堆浏览器折腾的前端开发er,上辈子都是折翼的天使……

经过N多搜索和尝试,终于找到兼容IE(使用IETester测试,6、7、8通过)、FireFox、Chrome、Opera的iframe自适应高度的解决方案。代码如下。主要,由于JavaScript的安全机制,仅限于同域内。对于跨域的情况,没有完美的解决方案,需要修改被嵌入页面的代码,没有太大的价值,不在此文讨论范围内。

JavaScript代码:

  function setIframeHeight(obj){
    var win = obj;
    if(document.getElementById && win) {
      if(window.opera) {
        //Opera
        if(win.contentWindow.document && win.contentWindow.document.body.scrollHeight) {
          win.height = win.contentWindow.document.body.scrollHeight;
        }
      } else {
        if(win.contentDocument && win.contentDocument.body.offsetHeight) {
          //IE8、、FireFox、Chrome
          win.height = win.contentDocument.body.offsetHeight;
        } else if(win.Document && win.Document.body.scrollHeight) {
          //IE7
          win.height = win.Document.body.scrollHeight;
        }
      }
    }
  }

HTML代码:

<iframe src="demo.jsp" id="iframeA" width="100%" height="100%" scrolling="no" frameborder="0" onload="javascript:setIframeHeight(this)" ></iframe>

参考:

  1. http://www.midnight-soft.cn/?p=391
  2. http://www.websjy.com/bbs/viewthread.php?tid=5421

“iframe自适应高度终极解决方案”的3个回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注