两层或以上的showModalDialog解决方法-优快云博客

本文探讨了在使用IE浏览器的showModalDialog功能时遇到的刷新问题，尤其是在多层调用的情况下。通过创建示例代码，展示了如何利用<a>标签解决这一难题。

在网页制作中经常会碰到数据的新增、修改、删除和查询等基本的功能，如果新增和修改功能是用 IE中的 showModalDialog 弹出对话框来实现新增数据和修改数据功能，新增或修改数据成功返回后则刷新其父页面。但showModalDialog有时候可能会带来一些你不想发生的结果，比如有关一些缓存、刷新，可能也会导致排版的一些问题（说错莫怪，或指正）；前些日子，项目中碰到的就是刷新的问题：
1、当页面为普通的页面时或者应该称为非showModalDialog调用时，进行调用showModalDialog弹出对话框来新增修改数据一切正常;
2、当页面为showModalDialog调用时，再进行调用showModalDialog弹出对话框来新增修改数据或做其它的一些事情，此时刷新就出现了一些问题。
3、也就是说当有两层或两以上的showModalDialog时，刷新就会出现问题了（它们另弹出一个页面）。

解决思路：
1、在<head></head>中加入<base target="_self" />，测试一样的效果。苦闷ing.....
2、通过javascript动态更改网页的地址,什么window.location.href = "url";或window.navigate("url")都不行。
3、baidu了一下查不到什么的解决方法，无奈中~~~，听说showModalDialog中没有location，不知道是不是？
4、看看链接可不可以解决此问题，加入<a href="url" >url</a> 测试一下，咦行得通，哈，那以上的问题也就解决了一大半了。

以下为一些代码：
文件：071214Test ShowModalDialg Step One.htm

1 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
2 < html >
3      < head >
4          < meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
5          < meta name ="keywords" content ="showModalDialog,弹出对话框,Dialog" >
6          < meta name ="Author" Content ="Sam Lin,林森桐，linsentong@126.com" >
7          < meta name ="Contact" content ="linsentong@126.com" />
8          < META content ="showModalDialog -- Sam Lin,弹出对话框解决方法,三层showModalDialog解决方法" name ="description" >
9          < META content ="MSHTML 6.00.2900.3199" name =GENERATOR >
10          < META content =TRUE name =MSSmartTagsPreventParsing >
11          < META http-equiv =MSThemeCompatible content =Yes >
12          < title > Test ShowModalDialg Step One </ title >
13          < base target ="_self" />
14          < script type ="text/javascript" src =DialogUtil.js ></ script >
15          < style type ="text/css" >
16             html,body
17              {
18                 background : #DCDCDC ;
19              }
20             .Description,input
21              {
22                 border : 1px #6595d6 dashed ;
23                 padding : 5px ;
24                 margin : 0 auto ;
25                 color : #000 ;
26                 font-size : 12px ;
27              }
28             a
29              {
30                 text-decoration : none ;
31              }
32             a:link { color : #4682B4 }
33             a:visited { color : #4682B4 }
34             a:hover { color : #F4A460 }
35             a:active { color : #F4A460 }
36             .title
37              {
38                 background : #BDB76B ;
39                 line-height : 24px ;
40                 text-align : left ;
41                 font-size : 16px ;
42                 padding : 2px ;
43                 font-weight : bold ;
44                 text-indent : 12px ;
45                 color : #4682B4 ;
46              }
47
48          </ style >
49      </ head >
50      < body >
51      < div class ="Description" >
52      < div class ="title" >
53         说明
54      </ div >
55         Author:Sam Lin < br />
56         Contact: < a href ="mailto:linsentong@126.com" > linsentong@126.com </ a >< br />
57         Memo:解决多层弹出对话框出现的问题，合适IE浏览器。 < br />
58         Date:Dec.14,2007
59          < br />
60          < br />
61         第一层
62      </ div >
63      < br />
64      < input type ="button" value ="弹出第二层对话框" onclick ="ShowNewOrEditDialog({
65                                                                         Url:'071214Test ShowModalDialg Step Two.htm',
66                                                                         Width:500,Height:400})" >
67      </ body >
68 </ html >
69

文件二：071214Test ShowModalDialg Step Two.htm

1 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
2 < html >
3      < head >
4          < meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
5          < meta name ="keywords" content ="showModalDialog,弹出对话框,Dialog" >
6          < meta name ="Author" Content ="Sam Lin,林森桐，linsentong@126.com" >
7          < meta name ="Contact" content ="linsentong@126.com" />
8          < META content ="showModalDialog -- Sam Lin,弹出对话框解决方法,三层showModalDialog解决方法" name ="description" >
9          < META content ="MSHTML 6.00.2900.3199" name =GENERATOR >
10          < META content =TRUE name =MSSmartTagsPreventParsing >
11          < META http-equiv =MSThemeCompatible content =Yes >
12          < title > Test ShowModalDialg Step Two </ title >
13          < script type ="text/javascript" src =DialogUtil.js ></ script >
14          < style type ="text/css" >
15             html,body
16              {
17                 background : #DCDCDC ;
18              }
19             .Description,input
20              {
21                 border : 1px #6595d6 dashed ;
22                 padding : 5px ;
23                 margin : 0 auto ;
24                 color : #000 ;
25                 font-size : 12px ;
26              }
27             a
28              {
29                 text-decoration : none ;
30              }
31             a:link { color : #4682B4 }
32             a:visited { color : #4682B4 }
33             a:hover { color : #F4A460 }
34             a:active { color : #F4A460 }
35             .title
36              {
37                 background : #BDB76B ;
38                 line-height : 24px ;
39                 text-align : left ;
40                 font-size : 16px ;
41                 padding : 2px ;
42                 font-weight : bold ;
43                 text-indent : 12px ;
44                 color : #4682B4 ;
45              }
46
47          </ style >
48
49          < base target ="_self" />
50      </ head >
51      < body >
52      < div class ="Description" >
53      < div class ="title" >
54         说明
55      </ div >
56         Author:Sam Lin < br />
57         Contact: < a href ="mailto:linsentong@126.com" > linsentong@126.com </ a >< br />
58         Memo:解决多层弹出对话框出现的问题，合适IE浏览器。 < br />
59         Date:Dec.14,2007
60          < br />
61          < br />
62         第二层
63      </ div >
64
65      < br />
66      < input type ="button" value ="弹出第三层对话框" onclick ="ShowNewOrEditDialog({
67                                                                         Url:'071214Test ShowModalDialg Step Three.htm',
68                                                                         Width:500,Height:400})" >
69      < a href ="http://www.cnblogs.com/samlin" id ="test" title ="林森桐的blog" > My Blog </ a >
70      < br />
71      < input type ="button" value ="将页面地址设为：http://www.baidu.com" onclick ="javascript:window.location.href = 'http://www.baidu.com';" >
72      < input type ="button" value ="关闭（没有返回值）" onclick ="javascript:window.close();" />
73      < input type ="button" value ="关闭（有返回值）" onclick ="javascript:window.returnValue = true;window.close();" />
74      < br />
75      </ body >
76 </ html >
77

文件三：

1 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
2 < html >
3      < head >
4          < meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
5          < meta name ="keywords" content ="showModalDialog,弹出对话框,Dialog" >
6          < meta name ="Author" Content ="Sam Lin,林森桐，linsentong@126.com" >
7          < meta name ="Contact" content ="linsentong@126.com" />
8          < META content ="showModalDialog -- Sam Lin,弹出对话框解决方法,三层showModalDialog解决方法" name ="description" >
9          < META content ="MSHTML 6.00.2900.3199" name =GENERATOR >
10          < META content =TRUE name =MSSmartTagsPreventParsing >
11          < META http-equiv =MSThemeCompatible content =Yes >
12          < title > 071214Test ShowModalDialg Step Three </ title >
13          < script type ="text/javascript" src =DialogUtil.js ></ script >
14          < style type ="text/css" >
15             html,body
16              {
17                 background : #DCDCDC ;
18              }
19             .Description,input
20              {
21                 border : 1px #6595d6 dashed ;
22                 padding : 5px ;
23                 margin : 0 auto ;
24                 color : #000 ;
25                 font-size : 12px ;
26              }
27             a
28              {
29                 text-decoration : none ;
30              }
31             a:link { color : #4682B4 }
32             a:visited { color : #4682B4 }
33             a:hover { color : #F4A460 }
34             a:active { color : #F4A460 }
35             .title
36              {
37                 background : #BDB76B ;
38                 line-height : 24px ;
39                 text-align : left ;
40                 font-size : 16px ;
41                 padding : 2px ;
42                 font-weight : bold ;
43                 text-indent : 12px ;
44                 color : #4682B4 ;
45              }
46
47          </ style >
48          < base target ="_self" />
49      </ head >
50      < body onbeforeunload ="javascript:window.returnValue=true;" >
51      < div class ="Description" >
52      < div class ="title" >
53         说明
54      </ div >
55         Author:Sam Lin < br />
56         Contact: < a href ="mailto:linsentong@126.com" > linsentong@126.com </ a >< br />
57         Memo:解决多层弹出对话框出现的问题，合适IE浏览器。 < br />
58         Date:Dec.14,2007
59          < br />
60          < br />
61         第三层
62      </ div >
63      </ body >
64 </ html >
65

JS文件：DialogUtil.js

/**

* @author Sam Lin

* @email: linsentong@126.com

* Date:Dec.16,2007

* Memo:This function only for IE browser

function ShowNewOrEditDialog( /*object hash*/ info)

{

var strOriginalUrl = document.location.href;

var strHrefID = "ReloadUrlHref";

//strHrefID = "test";

var objHref = null;

var strTargetUrl = info.Url;

var iWidth = info.Width; /*the web page arguments e.g width,height,left etc.*/

var iHeight = info.Height;

var iLeft = screen.availWidth;

var iTop = screen.availHeight;

iLeft = (iLeft - iWidth) / 2;

iTop = (iTop - iHeight) / 2;

var strArgs = "left:" + iLeft + ";top:" + iTop + ";width:" + iWidth + ";height:" + iHeight;

var strResult = window.showModalDialog(strTargetUrl,'',strArgs);

//alert(strOriginalUrl);

if (typeof window.location == "undefined" || typeof window.location == null)

{

alert("Null");

}

else

{

alert(window.location.href + " Not Null");

window.location.href = "http://www.google.cn";

}*/

//window.location.href = "http://www.google.cn";

//create the href element for reload function

// if true load the page

//alert(strResult);

if (strResult != "" && strResult != false && strResult != "undefined" && strResult !=undefined)

{

if ($(strHrefID))

{

objHref = $(strHrefID);

}

else

{

objHref = document.createElement("A");

//objHref.innerText = "Link Me";

//objHref.onclick = function(){alert("OnClick")};

document.body.appendChild(objHref);

}

//objHref.href = strOriginalUrl;

objHref.href = "http://www.cnblogs.com/samlin";

objHref.onclick = function()

{

var oDiv = document.createElement("div");

oDiv.style.width = "300px";

oDiv.style.height = "50px";

oDiv.style.lineHeight = "50px";

oDiv.style.position = "absolute";

oDiv.style.margin = "0 auto";

oDiv.style.padding = "2px";

oDiv.style.display = "block";

oDiv.style.textAlign = "center";

oDiv.style.backgroundColor = "#FFEBCD";

oDiv.style.border = "1px dashed #6595d6";

oDiv.innerText = "Loading another page

//oDiv.style.left = (document.body.availWidth - 300) + "px";

document.body.appendChild(oDiv);

};

fireClickEvent(strHrefID);

objHref.click();

}

/**

* @return the object belongs to the specified id

* @param {Object} id

function $(id)

{

return document.getElementById(id);

}

function fireClickEvent(id)

{

var obj = $(id);

if (obj)

{

if (document.all)

{

obj.fireEvent("onclick");

}

else

{

var evt = document.createEvent("MouseEvents");

evt.initEvent("click",true,true);

obj.dispatchEvent(evt);

}

示例代码： refresh_showModalDialog.rar

本文转自Sam Lin博客园博客，原文链接：http://www.cnblogs.com/samlin/archive/2007/12/16/996954.html，如需转载请自行联系原作者