• 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/
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

  • 相关阅读:
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    深度学习入门笔记(十九):卷积神经网络(二)
    用Excel表达图片如何由像素点构成
    使用you-get爬取各大网站视频
    自从有了这样的可视化报表,我们社区再没有过疫情(内含福利)
    端口测试程序
  • 原文地址:https://www.cnblogs.com/joysky/p/3889481.html
Copyright © 2020-2023  润新知