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

欢迎关注本人公众号：

作者赞赏

查看全文

相关阅读:
2019.8.30 玉米田
 2019暑假集训最短路计数
 2019暑假集训旅行计划
 2019暑假集训文件压缩
 0033-数字和星期转换
 0032-分数等级转换
 0031-闰年判断
 0030-购买衣服
 0029-求最小的数
 0028-判断奇偶

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