关于 IE 模态对话框的两个问题
2008-07-18 13:42
211 查看
showModalDialog 打开的模态对话框有不少经典的缺陷，在这里不再冗述，我只谈谈最近碰到的几个问题以及解决办法。
问题1. showModalDialog 打开一个 aspx 页面时，如果该页面在之前已经打开过一次，则自动会加载缓存中的页面，而不能显示最新数据。
解决的办法有两种：
(1). 在打开模态框时，给 url 后面多加一个随机参数，来避免页面被缓存：
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 方法里设定不缓存：
protected void Page_Load(object sender, EventArgs e){
Response.Expires = 0;
Response.Cache.SetNoStore();
Response.AppendHeader("Pragma", "no-cache");
}
问题2. 模态对话框中的内容和脚本加载次序不同，导致的问题。
缘起：考虑如下页面的代码
<!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 控件开发者引起注意）
幸运的是，我有这个控件的源代码。因此修改源代码解决了这个问题。我的解法类似于这样：
<!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>
问题1. showModalDialog 打开一个 aspx 页面时，如果该页面在之前已经打开过一次，则自动会加载缓存中的页面，而不能显示最新数据。
解决的办法有两种：
(1). 在打开模态框时，给 url 后面多加一个随机参数，来避免页面被缓存：
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 方法里设定不缓存：
protected void Page_Load(object sender, EventArgs e){
Response.Expires = 0;
Response.Cache.SetNoStore();
Response.AppendHeader("Pragma", "no-cache");
}
问题2. 模态对话框中的内容和脚本加载次序不同，导致的问题。
缘起：考虑如下页面的代码
<!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 控件开发者引起注意）
幸运的是，我有这个控件的源代码。因此修改源代码解决了这个问题。我的解法类似于这样：
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 关于 IE 模态对话框的两个问题
- 关于 IE 模态对话框的两个问题
- 关于 IE 模态对话框的两个问题
- 关于 IE 模态对话框的两个问题
- IE 模态对话框的两个问题
- 关于指定的Tomcat 404画面被IE替代的问题的解决
- 关于AutoCompleteTextView 为什么必须输入两个字符才能出现补全提示的问题的解决办法
- 关于xp+ie7下，执行confirm会出现点击取消也执行submit的问题解决方案
- 想探讨两个关于设计文档问题
- 关于列转行的两个函数(listagg,wm_concat)结果空白问题
- 关于IE问题，请教和求救
- 关于Ext使用过程中的两个问题处理
- 关于IE和火狐，谷歌，Safari对Html标签Object和Embed的支持问题
- 有关于两个app互相跳转问题
- 关于android创建快捷方式会启动两个应用的问题（一）
- 编译AMSS中关于的Python两个报错问题的总结
- 关于button按钮在IE中的宽度问题、、、、
- 关于解决jquery用get实现ajax在ie里面刷新不进入后台的问题
- 关于装两个Tomcat的问题
- 关于ff和ie共用js输出flash的问题