JS showModalDialog关闭子窗口刷新父页面完整教程

本文通过具体实例，详细讲解了在JavaScript中使用showModalDialog关闭子窗口后刷新主窗口的实现方法，供读者参考学习。

网络上常见的解决方案多采用window.opener.location.reload()等方式，但往往无法满足特定需求。

经过多次尝试与筛选，最终找到了一种有效的实现方式，以下是具体的操作步骤与代码解析。

showModalDialog与showModelessDialog的区别

主要涉及showModalDialog和showModelessDialog两种对话框类型的使用与区别。

一、showModalDialog与showModelessDialog的核心区别

showModalDialog：打开后始终处于焦点状态，用户无法切换到主窗口，直到对话框关闭，效果类似alert。showModelessDialog：打开后用户可自由切换焦点，对主窗口影响极小，仅可能暂时遮挡视线。

防止超链接弹出新窗口

二、如何在showModalDialog和showModelessDialog中防止超链接弹出新窗口

在打开的网页头部<head>标签内添加<base target="_self">即可实现该效果。

对话框内页面刷新技巧

三、如何实现showModalDialog和showModelessDialog的内容刷新

由于模态对话框内无法使用F5刷新或右键菜单，需借助JavaScript实现刷新功能，相关代码如下：


<body onkeydown="if (event.keyCode==116){reload.click()}">
<a id="reload" href="filename.htm" rel="external nofollow" style="display:none">reload...</a>

将filename.htm替换为目标网页名称，并插入到打开的网页中。按F5即可刷新，注意需配合<base target="_self">使用，否则按F5可能会弹出新窗口。

关闭对话框窗口的方法

四、如何使用JavaScript关闭showModalDialog（或showModelessDialog）窗口


<input type="button" value="关闭" onclick="window.close()">

同样需要配合<base target="_self">，否则直接关闭窗口可能会先打开一个新的IE窗口再关闭，造成体验不佳。

对话框间数据传递技巧

五、showModalDialog和showModelessDialog的数据传递技巧

(作者说明：原计划采用问答形式，但因难以表述清晰，改为通过实例演示。)

该功能较为复杂，经过多次调整才找到清晰的说明方式，以下通过具体例子进行说明。

示例场景：

需要在showModalDialog（或showModelessDialog）中读取或设置变量var_name。

常规传递方式：


window.showModalDialog("filename.htm",var_name)
//传递var_name变量
在showModalDialog(或showModelessDialog)读取和设置时：
alert(window.dialogArguments)//读取var_name变量
window.dialogArguments="oyiboy"//设置var_name变量

此方式虽能满足单一变量操作，但若需同时操作第二个变量var_id，则无法实现，体现了该传递方式的局限性。

推荐使用的传递方式：


window.showModalDialog("filename.htm",window)
//不管要操作什么变量，只直传递主窗口的window对象

在showModalDialog（或showModelessDialog）中读取和设置变量时：


alert(window.dialogArguments.var_name)//读取var_name变量
window.dialogArguments.var_name="oyiboy"//设置var_name变量

同时也可操作var_id变量。


alert(window.dialogArguments.var_id)//读取var_id变量
window.dialogArguments.var_id="001"//设置var_id变量

此外，还可对主窗口的任何对象进行操作，例如form对象中的元素。


window.dialogArguments.form1.index1.value="这是在设置index1元素的值"

多个无模式对话框的交互操作

六、多个showModelessDialog之间的相互操作

为简化说明，直接使用代码展示操作过程。

以下代码的主要功能是在一个showModelessDialog中移动另一个showModelessDialog的位置。

主文件的部分JavaScript代码。


var s1=showModelessDialog(''控制.htm'',window,"dialogTop:1px;dialogLeft:1px") //打开控制窗口
var s2=showModelessDialog(''about:blank'',window,"dialogTop:200px;dialogLeft:300px")
//打开被控制窗口

控制.htm页面的部分代码。


<script>
//操作位置数据，因为窗口的位置数据是"xxxpx"方式的，所以需要这样的一个特殊操作函数。
function countNumber(A_strNumber,A_strWhatdo)
{
 A_strNumber=A_strNumber.replace(''px'','''')
 A_strNumber-=0
 switch(A_strWhatdo)
 {
 case "-":A_strNumber-=10;break;
 case "+":A_strNumber+=10;break;
 }
 return A_strNumber + "px"
}
</script>
<input type="button" onclick="window.dialogArguments.s2.dialogTop=countNumber
(window.dialogArguments.s2.dialogTop,''-'')" value="上移">
<input type="button" onclick="window.dialogArguments.s2.dialogLeft=countNumber
(window.dialogArguments.s2.dialogLeft,''-'')" value="左移">
<input type="button" onclick="window.dialogArguments.s2.dialogLeft=countNumber
(window.dialogArguments.s2.dialogLeft,''+'')" value="右移">
<input type="button" onclick="window.dialogArguments.s2.dialogTop=countNumber
(window.dialogArguments.s2.dialogTop,''+'')" value="下移">

以上代码的关键部分包括：

窗口命名方式：


var s1=showModelessDialog(''控制.htm'',window,"dialogTop:1px;dialogLeft:1px")

变量访问方式：


window.dialogArguments.s2.dialogTop

此示例仅展示了showModelessDialog之间的位置操作功能，通过该原理，可在showModelessDialog间相互控制显示页面、传递变量和数据，具体应用需根据实际需求发挥。

关闭子窗口并刷新父窗口

若已打开模式窗口，并希望在该窗口中关闭自身并重新加载父窗口，代码如下：

代码实现如下：

Response.Write("<script language=javascript>parent.window.opener=null;parent.window.dialogArguments.location.reload();window.close();</script>");

或者采用其他等效实现方式。


function doModal(url){
 win=window.showModalDialog(url,0,"dialogWidth:500px;dialogHeight:500px;status:no;help:no;");
 document.location.reload();//js页面中加入这句话就行了
}

希望本文所述内容能对JavaScript程序设计有所帮助。

JS中showModalDialog关闭子窗口并刷新主窗口详解