zoukankan      html  css  js  c++  java
  • 弹出窗口内嵌iframe 框口自适应

      说一下,弹出窗口还有内嵌一个iframe 这种模式应该是不科学的,但是公司项目里面就偏偏用到了,它这高低还不能只适应,所以我痛苦的日子来了

    分析一下:

      首先window.showDialog 方法的时候会指定一下高度什么的,但是window里面内容可能撑爆它

          然后window 中的iframe里面的内容页可能撑爆iframe

          所以要想解决高度自适应的问题,就是从最低一级的iframe 开始高低只适应,但是同时在iframe 高度自适应之后得马上让window 也高度自适应

    代码如下:

    1、在window里面写下:

            var C_HEIGHT = "600px";
            /**
            * 模态窗口高度调整.
            * 根据操作系统及ie不同版本,重新设置窗口高度,避免滚动条出现.
            */
            function resetDialogHeight() {
                if (window.dialogArguments == null) {
                    return; //忽略非模态窗口
                }
                var ua = navigator.userAgent;
                var oFrame = document.getElementById("zyms");
               
                var height = oFrame.document.body.scrollHeight;
                if (ua.lastIndexOf("MSIE 6.0") != -1) {
                    if (ua.lastIndexOf("Windows NT 5.1") != -1) {
                        //alert("xp.ie6.0");
                        height = oFrame.document.body.offsetHeight;
                        //                    window.dialogHeight = (height + 102) + "px";
    
                        height = getHeight(height,102);
                    }
                    else if (ua.lastIndexOf("Windows NT 5.0") != -1) {
                        //alert("w2k.ie6.0");
                        height = oFrame.document.body.offsetHeight;
                        //                    window.dialogHeight = (height + 49) + "px";
                        height = getHeight(height, 49);
                    }
                } else {
                    height = oFrame.document.body.scrollHeight;
                    height = getHeight(height, 10);
                }
                window.dialogHeight = parsePixel(height);
    
            }
            /**
            * Iframe窗口高度调整.
            */
            function resetIframeHeight() {
                var oFrame = document.getElementById("zyms");
                oFrame.height = 0;
                var fdh = (oFrame.Document ? oFrame.Document.body.scrollHeight : oFrame.contentDocument.body.offsetHeight);
                oFrame.height = (fdh >= 500 && fdh <= 600 ? fdh : 600);
            }
            /**
            * 把字符串转为像素单位
            */
            function parsePixel(a) {
                if(a==null || typeof a =='undifined' || a==""){
                    return '0px';
                }
                return a.toString().indexOf('px')>0 ? a.toString() : a+'px';
            }
            /**
            * 设定高度的合理区间
            * 不同浏览器边框等高度不一样,故增量也不一下
            */
            function getHeight(height, increment) {
                if (parseInt(height) > 500 && parseInt(height) < 600) {
                    height = (height + increment);
                } else {
                    height = C_HEIGHT;
                }
                return height;
            }
    
    2、在iframe的load 事件中的代码:(当然iframe 的自适应也可以提成方法)
               <iframe id="zyms" frameborder="0" scrolling="yes" style="1000px;" onload=" resetIframeHeight();resetDialogHeight();">
               </iframe>
    

     3、iframe 关联的页面样式代码:

        <style type="text/css">
            body
            {
                overflow-y:auto;
                overflow-x:hidden;
            }
        </style>
    
  • 相关阅读:
    模块和包专区
    递归函数,三级菜单专区
    内置函数和匿名函数专区
    迭代器和生成器专区
    函数进阶专区
    初始函数专区
    题解 P6282 【[USACO20OPEN]Cereal S】
    题解 P6281 【[USACO20OPEN]Social Distancing S】
    题解 P6281 【[USACO20OPEN]Social Distancing S】
    第5题:棋盘
  • 原文地址:https://www.cnblogs.com/Dylanblogs/p/4342519.html
Copyright © 2011-2022 走看看