两层或以上的showModalDialog解决方法
在网页制作中经常会碰到数据的新增、修改、删除和查询等基本的功能,如果新增和修改功能是用 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
文件二:071214Test ShowModalDialg Step Two.htm
文件三:
JS文件:DialogUtil.js
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
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
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
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
* @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);
}
}
}