zoukankan      html  css  js  c++  java
  • iframe自适应高度

    方法一:

    //iframe高度自适应
    
    function IFrameReSize(iframename) {
    
    var pTar = document.getElementById(iframename);
    
    if (pTar) { //ff
    
    if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight) {
    
    pTar.height = pTar.contentDocument.body.offsetHeight;
    
    } //ie
    
    else if (pTar.Document && pTar.Document.body.scrollHeight) {
    
    pTar.height = pTar.Document.body.scrollHeight;
    
    }
    
    }
    
    }
    //iframe宽度自适应
    
    function IFrameReSizeWidth(iframename) {
    
    var pTar = document.getElementById(iframename);
    
    if (pTar) { //ff
    
    if (pTar.contentDocument && pTar.contentDocument.body.offsetWidth) {
    
    pTar.width = pTar.contentDocument.body.offsetWidth;
    
    } //ie
    
    else if (pTar.Document && pTar.Document.body.scrollWidth) {
    
    pTar.width = pTar.Document.body.scrollWidth;
    
    }
    
    }
    
    }

    使用方法:

    <iframe src="Main.htm" scrolling="no" frameborder="0" height="100%" id="mainFrame" width="100%" onload='IFrameReSize("mainFrame");IFrameReSizeWidth("mainFrame");'></iframe>

    方法二:经典代码 iFrame 自适应高度,在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通过测试。

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

    注意:不论上边哪种方法,在使用的时候,一定要设置iframe的width=100%和height=100%


    作者:GitLoft
    出处:http://www.cnblogs.com/joysky/
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

  • 相关阅读:
    un-MIS:百科
    CSS:CSS 颜色十六进制值
    CSS:CSS 颜色名
    CSS:CSS 合法颜色值
    大端法、小端法、网络字节序
    Java实现 洛谷 P1028 数的计算
    Java实现 洛谷 P1028 数的计算
    Java实现 洛谷 P1036 选数
    Java实现 洛谷 P1036 选数
    Java实现 洛谷 P1036 选数
  • 原文地址:https://www.cnblogs.com/joysky/p/3889481.html
Copyright © 2011-2022 走看看