zoukankan      html  css  js  c++  java
  • iframe自适应高度的多种方法小结

    转自:http://www.jb51.net/article/15780.htm

      不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行,现在,总结一下iframe动态调整高度的方法,主要是以下JS函数:

    第一种方法:(代码简单,兼容性还可以,先测试下)

    function SetWinHeight(obj) { 
      var win=obj; 
      if (document.getElementById){ 
        if (win && !window.opera){ 
          if (win.contentDocument && win.contentDocument.body.offsetHeight) 
            win.height = win.contentDocument.body.offsetHeight;
          else if(win.Document && win.Document.body.scrollHeight) 
            win.height = win.Document.body.scrollHeight; 
        }
      }
    }

    最后,加入iframe,不能丢掉onload属性,当然了,id也必须也函数中的win匹配

    <iframe width="778" align="center" height="200" id="win" name="win" onload="Javascript:SetWinHeight(this)" 
    frameborder="0" scrolling="no" src="1.htm"></iframe>

    第一种方法:(经典代码 iFrame 自适应高度,在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通过测试)

    <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>

    第三种方法:(下面这个兼容性更好一些)

    <script language="javascript" type="text/javascript"> 
      function dyniframesize(down) { 
        var pTar = null; 
        if (document.getElementById){ 
          pTar = document.getElementById(down); 
        }else{ 
          eval('pTar = ' + down + ';'); 
        } 
        if (pTar && !window.opera){ 
          //begin resizing iframe 
          pTar.style.display="block" 
          if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){ 
            //ns6 syntax 
            pTar.height = pTar.contentDocument.body.offsetHeight +20; 
            pTar.width = pTar.contentDocument.body.scrollWidth+20; 
          }else if (pTar.Document && pTar.Document.body.scrollHeight){ 
            //ie5+ syntax
            pTar.height = pTar.Document.body.scrollHeight; 
            pTar.width = pTar.Document.body.scrollWidth; 
          } 
        } 
      } 
    </script> 
    <iframe src ="/default2.aspx" frameborder="0" marginheight="0" marginwidth="0" frameborder="0"
      scrolling="auto" id="ifm" name="ifm" onload="javascript:dyniframesize('ifm');" width="100%"> </iframe>

    注意:src=中你必须填写的网页地址,一定要和本页面在同一个站点上,否则,会抱错,说“拒绝访问!”(实际上这是因为Js的跨域问题导致拒绝访问的),意思就是说如果该网页不是发布验证的话,会报错的。

  • 相关阅读:
    Linux I/O调度
    集群心跳机制
    如何修改集群的公网信息(包括 VIP) (文档 ID 1674442.1)
    AVL树(平衡二叉树)
    二叉搜索树
    二叉树及树的遍历
    python实现基数排序
    python之迷宫BFS
    python之迷宫DFS
    python实现队列
  • 原文地址:https://www.cnblogs.com/tv151579/p/3251690.html
Copyright © 2011-2022 走看看