关于 IE 模态对话框的两个问题
关于 IE 模态对话框的两个问题
Author:
木野狐 From:
木野狐showModalDialog 打开的模态对话框有不少经典的缺陷，在这里不再冗述，我只谈谈最近碰到的几个问题以及解决办法。
问题1. showModalDialog 打开一个 aspx 页面时，如果该页面在之前已经打开过一次，则自动会加载缓存中的页面，而不能显示最新数据。
解决的办法有两种：
(1). 在打开模态框时，给 url 后面多加一个随机参数，来避免页面被缓存：
Code
var url = 'EditFlowNode.aspx?flowId=0&id=2&x=' + Math.random();
var result = window.showModalDialog(url, '', 'status:no; help:no;');
(2). 在该 asp.net 页面的 Page_Load 方法里设定不缓存：
Code
protected void Page_Load(object sender, EventArgs e){
Response.Expires = 0;
Response.Cache.SetNoStore();
Response.AppendHeader("Pragma", "no-cache");
}
问题2. 模态对话框中的内容和脚本加载次序不同，导致的问题。
缘起：考虑如下页面的代码
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
<input id="txt1">
<script type="text/javascript">
<!--
alert(document.getElementById('txt1').offsetWidth);
//-->
</script>
</body>
</html>
这个页面，如果在普通的 IE 窗口中加载时，提示的信息是 "155"，而在模态对话框中执行时，其数值是 "0"。为什么会这样？
我们注意到普通窗口打开该页面时，当跳出 alert 对话框后，整个页面元素都已经正常显示了；而模态框在打开时，跳出 alert 对话框后，其背景却是一片空白；等点击“确定”后，才会显示出网页内容。
由此可以推测，模态框和普通页面在解析执行 HTML 时的次序不同：
普通页面：依次解析 body 中的元素，并随即绘制(render)解析完的元素。如果碰到 script, 则立刻执行之。
模态对话框：依次解析 body 中的元素，但并未立即绘制(render)它们。如果碰到 script, 则立刻执行之。等 body 都加载完毕后，再依次绘制其中的元素。
由于以上我们示例代码中访问到了 offsetWidth 属性，而我们可以推知，该属性一定是当元素被绘制(render)完毕后，才会自动计算出有意义的数值。所以就导致了问题中看到的现象。
之所以考虑到这个问题，其实是因为我在模态对话框中使用一个第三方控件的时候，出现了 bug，经过调试发现根源的原因在于该控件采用了常用的代码模式来输出其 HTML。也就是在一段 HTML 输出后，紧接着输出其初始化脚本。（
这个问题值得 ASP.NET 控件开发者引起注意）
幸运的是，我有这个控件的源代码。因此修改源代码解决了这个问题。我的解法类似于这样：
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
<input id="txt1">
<script type="text/javascript">
<!--
var _document_body_onload = document.body.onload;
document.body.onload = function(){
// 这里做你需要做的初始化动作
alert(document.getElementById('txt1').offsetWidth);
if(_document_body_onload && typeof(_document_body_onload) == 'function')
_document_body_onload();
}
//-->
</script>
</body>
</html>
| 感谢原创者的辛勤劳动，希望对您有所帮助，转载请注明原出处。 |
