zoukankan      html  css  js  c++  java
  • 自动适应iframe右边的高度

    在开发项目过程中,用iframe嵌套,会发现一个问题,用iframe嵌套的html结构右边不会自动适应高度。

    这时候找到了一个解决方法:

    <iframe name="my_iframe" id="mainframe" marginheight="0" marginwidth="0" frameborder="0" scrolling="no" width="100%" height="100%" src=""></iframe>

    2、记住要引入iframe.js文件
    <script type="text/javascript" src="js/iframe.js" ></script>

     下面是iframe.js的具体内容

    var browserVersion = window.navigator.userAgent.toUpperCase();
    var isOpera = browserVersion.indexOf("OPERA") > -1 ? true : false;
    var isFireFox = browserVersion.indexOf("FIREFOX") > -1 ? true : false;
    var isChrome = browserVersion.indexOf("CHROME") > -1 ? true : false;
    var isSafari = browserVersion.indexOf("SAFARI") > -1 ? true : false;
    var isIE = (!!window.ActiveXObject || "ActiveXObject" in window);
    var isIE9More = (! -[1, ] == false);
    function reinitIframe(iframeId, minHeight) {
        try {
            var iframe = document.getElementById(iframeId);
            var bHeight = 0;
            if (isChrome == false && isSafari == false)
                bHeight = iframe.contentWindow.document.body.scrollHeight;
    
            var dHeight = 0;
            if (isFireFox == true)
                dHeight = iframe.contentWindow.document.documentElement.offsetHeight + 2;
            else if (isIE == false && isOpera == false)
                dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
            else if (isIE == true && isIE9More) {//ie9+
                var heightDeviation = bHeight - eval("window.IE9MoreRealHeight" + iframeId);
                if (heightDeviation == 0) {
                    bHeight += 3;
                } else if (heightDeviation != 3) {
                    eval("window.IE9MoreRealHeight" + iframeId + "=" + bHeight);
                    bHeight += 3;
                }
            }
            else//ie[6-8]、OPERA
                bHeight += 3;
    
            var height = Math.max(bHeight, dHeight);
            if (height < minHeight) height = minHeight;
            iframe.style.height = height + "px";
        } catch (ex) { }
    }
    function startInit(iframeId, minHeight) {
        eval("window.IE9MoreRealHeight" + iframeId + "=0");
        window.setInterval("reinitIframe('" + iframeId + "'," + minHeight + ")", 100);
    }

     方法二:(<iframe>标签自适应高度和宽度 )

      1、HTML结构

    <iframe src="index.html" id="iframepage" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" onLoad="iFrameHeight()">
    </
    iframe>

      2、js:

    <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;
            ifm.width = subWeb.body.scrollWidth;
         }      
      }      
    </script>
  • 相关阅读:
    中文字符集编码Unicode ,gb2312 , cp936 ,GBK,GB18030
    深入理解linux i节点(inode)
    汉字区位码、机内码学习笔记
    CSDN密码使用前10名
    GB2312汉字区位码、交换码和机内码转换方法(转)
    我的网名为什么是ma6174????
    解决CHM文档在linux下的乱码问题
    数据结构实验二:栈和队列的基本操作和应用
    精确记算程序的运行时间或者某段代码的运行时间
    键盘、游戏、ASCII码引出的一系列问题
  • 原文地址:https://www.cnblogs.com/wuxibolgs329/p/6204503.html
Copyright © 2011-2022 走看看