说一下,弹出窗口还有内嵌一个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>

弹出窗口内嵌iframe 框口自适应的更多相关文章

  1. ios11,弹出层内的input框光标错位 键盘弹出时,输入信息,光标一直乱跳

      之前开发了一个微信项目,维护期中苹果手机突然出现光标错位现象,经过排查,发现是最新的ios11系统的锅. 具体情况:弹出层使用position: fixed:弹出层内附带input/textare ...

  2. 调试一个Ext打开的window窗口内嵌Iframe的form提交问题

    一个奇怪的问题是:潜逃在iframe里的页面单独提交都是正常,放到iframe里面通过js调用在parent页面.提交总是被莫名其妙的杀掉. 确定js简单无错之后,继续看parent的处理逻辑,有这么 ...

  3. NSS_06 extjs弹出窗口上的文本框默认获得焦点

    这个问题其实是个窗户纸, 没什么技术含量,但是做的过程中有点曲折, 所以也记录下来吧. Ext.window.Window中有focus(o1, o2)方法, 作用:Try to focus this ...

  4. 深入浅出ExtJS 第七章 弹出窗口

    7.1 Ext.MessageBox 7.1 Ext.MessageBox //Ext.MessageBox为我们提供的alert/confirm/prompt等完全可以代替浏览器原生; 7.1.1 ...

  5. 原生Js封装的弹出框-弹出窗口-页面居中-多状态可选

    原生Js封装的弹出框-弹出窗口-页面居中-多状态可选   实现了一下功能: 1.title可自定义 可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出 ...

  6. 微信内置浏览器浏览H5页面弹出的键盘遮盖文本框的解决办法(转)

    最近在做微信公众号的内嵌页面,发现点击输入框时键盘盖住文本框,找到一段代码解决了这个问题. iOS和android手机都已亲测,需要的可以直接拷贝到代码中使用. js代码如下: $(function ...

  7. 20160513--js 弹出窗口带有iframe控件 备忘

    需要引用JQuery. /*! * 主 题:<页面弹出窗口> * 说 明:用于页面弹出的窗口. * 功能描述: * 1.生成弹出窗口,窗口内包括iframe控件: * 2.窗口弹出时,生成 ...

  8. Java Selenium (十二) 操作弹出窗口 & 智能等待页面加载完成 & 处理 Iframe 中的元素

    一.操作弹出窗口   原理 在代码里, 通过 Set<String> allWindowsId = driver.getWindowHandles(); 来获取到所有弹出浏览器的句柄, 然 ...

  9. ajax弹出窗口

    提取自ZCMS的弹出框: 代替window.open.window.alert.window.confirm:提供良好的用户体验: 水晶质感,设计细腻,外观漂亮: 兼容ie6/7/8.firefox2 ...

随机推荐

  1. 「深入理解计算系统」从Hello World开始

    从 hello world 开始 Table of Contents 1 程序源文件 2 程序源文件是什么 3 程序被编译 4 程序运行 4.1 读取命令 4.2 读取指令内容 4.3 执行过程 5 ...

  2. SQL SERVER 2000/2005/2008数据库数据迁移到Oracle 10G细述

    最近参与的一个系统涉及到把SQL Server 2k的数据迁移到Oracle 10G这一非功能需求.特将涉及到相关步骤列举如下供大家参考: 环境及现有资源: 1.OS: Windows 7 Enter ...

  3. javaScript 工作必知(七) 对象继承

    对象继承inherit var o = { r: 1 }; var c = function f() { }; c.prototype = o; c.r = 3; alert(o.r);//被继承的属 ...

  4. JDK1.7 安装加(一劳永逸的环境配置)

    1.去oracl官网下载jdk http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html. ...

  5. 网络基本功(二十七):Wireshark抓包实例分析HTTP问题

    转载请在文首保留原文出处:EMC中文支持论坛https://community.emc.com/go/chinese 介绍 HTTP的问题可能是由于慢速服务器或客户端,TCP性能问题,本文讨论上述问题 ...

  6. java中Log4J的使用笔记

    使用Log4J,程序员可以控制日志信息输送的目的地,包括控制台,文件,GUI组件和NT事件记录器,也可以控制每一条日志的输出格式,或通过定义每一条日志信息的级别,更加细致地控制日志的生成过程. Log ...

  7. redolog

    总结: 教育我们:redo文件组需要创建多个组,建议至少3个,每个组至少2个文件,最好放在不同的硬盘上. 当联机日志文件丢失一般使用清除日志的方法: alter database clear logf ...

  8. CocoaPods 出现 OTHER_LDFLAGS 错误的解决方法

    CocoaPods 出现 OTHER_LDFLAGS 错误的解决方法 在一些项目中运行 pod install 后经常会出现如下错误 [!] The target `项目名 [Debug]` over ...

  9. java 中有几种方法可以实现一个线程? 用什么关键字修 饰同步方法? stop()和 suspend()方法为何不推荐使用?

    java5 以前, 有如下两种:第一种:new Thread(){}.start();这表示调用 Thread 子类对象的 run 方法, new Thread(){}表示一个Thread 的匿名子类 ...

  10. Dijkstra算法求单源最短路径

    Description 在每年的校赛里,所有进入决赛的同学都会获得一件很漂亮的t-shirt.但是每当我们的工作人员把上百件的衣服从商店运回到赛场的时候,却是非常累的!所以现在他们想要寻找最短的从商店 ...