iframe自适应高度

来源：互联网发布：软件企业认定管理办法编辑：程序博客网时间：2024/05/21 16:57

1.首先给出一个iframe

frameborder="0" scrolling="no" src="xxxxx.html">
</iframe>

2、然后看看怎么获取Iframe中的页面的高度。
其实最麻烦的就是怎么让获取的高度准确，不同的方式不同的浏览器中获取到的值都会不一样！

function getDocHeight(doc) {
//在IE中是document.body.scrollHeight

//在Firefox中是document.height

      var docHei = 0;
      var scrollHei;          //scrollHeight
      var offsetHei;        //offsetHeight，包含了边框的高度
      if (document.height) {
           //Firefox支持此属性，IE不支持
           docHei = document.height;
      } else

              if (document.body)   {
                  //在IE中，只有body.scrollHeight是与当前页面的高度一致的，
                   //其他的跳转几次后就会变的混乱，不知道是依照什么取的值！
                   //似乎跟包含它的窗口的大小变化有关
                   if(document.body.offsetHeight) docHei = offsetHei = document.body.offsetHeight;
                   if(document.body.scrollHeight) docHei = scrollHei = document.body.scrollHeight;
               } else

if(document.documentElement) {
if(document.documentElement.offsetHeight)

docHei = offsetHei = document.documentElement.offsetHeight;
if(doc.documentElement.scrollHeight)

                                         docHei = scrollHei = doc.documentElement.scrollHeight;
                      }
              return docHei;
}

3、最后修改Iframe的高度，并用一个定时器来不间断检查它包含的页面的高度变化

function doReSize() {
var iframeWin = window.frames['ifrm'];
var iframeEl = window.document.getElementById? window.document.getElementById('ifrm'):

                                                                                          document.all? document.all['ifrm']: null;
         if ( iframeEl && iframeWin ) {
                  var docHei = getDocHeight(iframeWin.document);
                  if (docHei != iframeEl.style.height) iframeEl.style.height = docHei + 'px';
        } else

            if(iframeEl) {
                  var docHei = getDocHeight(iframeEl.contentDocument);
                  if (docHei != iframeEl.style.height) iframeEl.style.height = docHei + 'px';
            }
}
function runResizeTask() {
           doReSize();
           setTimeout("runResizeTask()",500);//每隔半秒执行一次
}
runResizeTask();

在这里就没有去考虑被包含的页面中是否有折叠、隐藏/展现的情况了！