欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

html iframe高度自适应

程序员文章站 2022-05-14 09:41:01
想到的一种办法是,在父页面里获取子页面的高度,在父页面onlod里把获取到子页面的高度赋值给父页面iframe标签,不过这种方法感觉不是很好,因为浏览器兼容性不好,获取不到高度 这种方法有两种写法 还有一种是兼容性比较好的 ......

想到的一种办法是,在父页面里获取子页面的高度,在父页面onlod里把获取到子页面的高度赋值给父页面iframe标签,不过这种方法感觉不是很好,因为浏览器兼容性不好,获取不到高度

这种方法有两种写法

<script type="text/javascript">
  // 计算页面的实际高度,iframe自适应会用到
  function calcpageheight(doc) {
      var cheight = math.max(doc.body.clientheight, doc.documentelement.clientheight)
      var sheight = math.max(doc.body.scrollheight, doc.documentelement.scrollheight)
      var height  = math.max(cheight, sheight)
      return height
  }
  var ifr = document.getelementbyid('ifr')
  ifr.onload = function() {
      var idoc = ifr.contentdocument || ifr.document
      var height = calcpageheight(idoc)
      ifr.style.height = height + 'px'
  }
</script>
<script>
    // 计算页面的实际高度,iframe自适应会用到
    function calcpageheight(doc) {
        var cheight = math.max(doc.body.clientheight, doc.documentelement.clientheight)
        var sheight = math.max(doc.body.scrollheight, doc.documentelement.scrollheight)
        var height  = math.max(cheight, sheight)
        return height
    }
    window.onload = function() {
        var height = calcpageheight(document)
        parent.document.getelementbyid('ifr').style.height = height + 'px'     
    }
</script>

 

还有一种是兼容性比较好的

<iframe src="http://www.fufuok.com/" id="iframepage" name="iframepage" frameborder=0 scrolling=no width="100%" onload="iframeheight()" ></iframe>javascript代码: 
<script type="text/javascript" language="javascript"> 
function iframeheight() { 
var ifm= document.getelementbyid("iframepage"); 
var subweb = document.frames ? document.frames["iframepage"].document : ifm.contentdocument; 
if(ifm != null && subweb != null) { 
ifm.height = subweb.body.scrollheight; 
} 
} 
</script>