两层或以上的showModalDialog解决方法

zoukankan html css js c++ java

两层或以上的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

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 + ";" + 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

转载请注明出处［http://samlin.cnblogs.com/］

欢迎关注本人公众号：

作者赞赏

查看全文

相关阅读:
Smart Client Architecture and Design Guide
Duwamish密码分析篇, Part 3
庆贺发文100篇
 .Net Distributed Application Design Guide
New Introduction to ASP.NET 2.0 Web Parts Framework
SPS toplevel Site Collection Administrators and Owners
来自Ingo Rammer先生的Email关于《Advanced .Net Remoting》
The newsletter published by Ingo Rammer
深度探索.Net Remoting基础架构
 信道、接收器、接收链和信道接受提供程序

原文地址：https://www.cnblogs.com/samlin/p/996954.html