• 让iframe自适应高度(支持XHTML,支持FF)

    2007-04-10 | Tag:旧宅

    版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
    http://www.leotm.com/logs/35259252.html

    先说明,这个办法只限于iframe中的子页面也是本地页面(不能引用外网页面)

    ======方法=====
    第一步 js部分

    function getSize() {
          var xScroll, yScroll;
          if (window.innerHeight && window.scrollMaxY) {
                  xScroll = document.body.scrollWidth;
                  yScroll = window.innerHeight + window.scrollMaxY;
          } else if (document.body.scrollHeight > document.body.offsetHeight){      // all but Explorer Mac
                  xScroll = document.body.scrollWidth;
                  yScroll = document.body.scrollHeight;
          } else {      // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
                  xScroll = document.body.offsetWidth;
                  yScroll = document.body.offsetHeight;
          }

          var windowWidth, windowHeight;
          if (self.innerHeight) {      // all except Explorer
                  windowWidth = self.innerWidth;
                  windowHeight = self.innerHeight;
          } else if (document.documentElement && document.documentElement.clientHeight) {      // Explorer 6 Strict Mode
                  windowWidth = document.documentElement.clientWidth;
                  windowHeight = document.documentElement.clientHeight;
          } else if (document.body) {      // other Explorers
                  windowWidth = document.body.clientWidth;
                  windowHeight = document.body.clientHeight;
          }

          // for small pages with total height less then height of the viewport
          if(yScroll < windowHeight){
                  pageHeight = windowHeight;
                  y = pageHeight;
          } else {
                  pageHeight = yScroll;
                  y = pageHeight;
          }

          if(xScroll < windowWidth){
                  pageWidth = windowWidth;
          } else {
                  pageWidth = xScroll;
          }

          arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
          return arrayPageSize;
    }
    这段代码用来获取目标页的参数,包括页面高、宽,屏幕高、宽
    function autoHeight(pid) {
          var x = new getSize();
          parent.document.getElementById(pid).height=x[1];
    }
    这段代码用来实现父页面中iframe的高度自适应

    \\\\\\\\\
    第二步 页面部分

    <div class="onright" style="width:480px;"><iframe id="infrm" name="infrm" marginwidth="0" marginheight="0" width="100%" src="park.htm" frameborder="0" scrolling="auto"></iframe>
    这是父页面的iframe,没什么特别的,和普通的iframe一样,不过要设置好id值,以便子页面的参数调用。

    <body onload="autoHeight('infrm')"></body>
    在body中利用onload事件,将自身的高度传给父页面的iframe。

    \\\\\\\\\
    打完收工~本方法在IE6,FF2,XPsp2下顺利通过,FF无报错~




    历史上的今天:


    收藏到:Del.icio.us
    无觅相关文章插件
    喜欢本文?那分享给好友吧!

    引用地址: