zoukankan      html  css  js  c++  java
  • html 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>
  • 相关阅读:
    CSS——制作天天生鲜主页
    HTML——制作一个图片列表
    HTML——制作一个简易菜单栏
    CSS——三种页面引入方法
    【20170903】模拟赛
    【LA 3942】 Remember the word
    【BZOJ 1036】 树的统计count
    UVA 12299 RMQ with shifts
    【20170706】次短路
    【20170706】保卫萝卜
  • 原文地址:https://www.cnblogs.com/zxf100/p/10322564.html
Copyright © 2011-2022 走看看