弹出窗口内嵌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="width:1000px;" onload=" resetIframeHeight();resetDialogHeight();">
           </iframe>

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

    <style type="text/css">
        body
        {
            overflow-y:auto;
            overflow-x:hidden;
        }
    </style>

 

posted @ 2015-03-16 18:40  德玛西亚冲锋  阅读(552)  评论(0编辑  收藏  举报