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