JavaScript showModalDialog 操作父窗口对象详解

ModalDialog 操作父窗口对象概述

在 ModalDialog 中操作父窗口对象

Window.parent 主要用于 Frame 框架内的操作，在对话框模式下无法直接用于操作父窗口对象。

调用 modaldialog 时可以通过传递参数的方式来操作父窗口。

例如：

通过参数传递操作父窗口元素

需求

假设父窗口页面为 a.html，子窗口页面为 b.html。a.html 中包含一个 id 为 test1 的文本框，需要在打开的对话框中点击按钮，将 a.html 中该文本框的值修改为“子窗口值”。

实现

在打开对话框时，将 test1 元素作为参数传递给子窗口。在子窗口中获取该参数，并将该参数对象（即从 a.html 传递过来的 text 对象）的 value 属性值设置为“子窗口值”。

注意：这里只能传递 id，不能传递 name。

a.html 代码如下

 
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>
<title>a.html</title>
</head>
<body>
<input type=text id=test1 value=”>”
<input type=button value=” OK ” onclick='window.showModalDialog(“b.html”, test1)'>
</body>
</html>

b.html 代码如下

 
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>
<title>b.html</title>
<script language=javascript>
function func1(){
//获取父窗口传过来的参数
var ptextid = window.dialogArguments;
if(ptextid != undefined){
//将父窗口传过来的对象的值改为“子窗口值”
ptextid.value = ”子窗口值“;
//关闭子窗口
window.close();
} 
} 
</script>
</head>
<body>
<input type=button value=” OK ” onclick=func1()>
</body>
</html>

如果需要操作的父窗口对象较多，也可以将 window 或 window.document 作为参数传递给子窗口。

复杂场景下的父窗口操作方案

例如：

需求

在 a.html 中添加 id 为“aform”的 form，form 中包含 id 为 test2 的文本框。在 b.html 中，除了执行上述操作外，还需将 test2 的值修改为“子窗口值2”，并将 form 提交到 c.html。

实现1

将 a.html 中打开对话框的函数修改为如下方式:

window.showModalDialog(“b.html”, window.document);

将 b.html 中的 func1() 修改为如下:

 
function func1(){
var pdoc = window.dialogArguments;
if(pdoc!=undefined){
pdoc.all.test1.value=”子窗口值“;
pdoc.all.test2.value=”子窗口值2″;
pdoc.all.aform.action=”c.html“;
pdoc.all.aform.submit();
} 
} 

实现2

由于在子窗口中对父窗口的操作较多，也可以采用 execScript 的方式来实现。

将 a.html 中打开对话框的函数修改为如下方式:

 
window.showModalDialog(“b.html”, window);

添加 javascript 函数如下

 
function func(){
test1.value=”子窗口值“;
document.all.test2.value=”子窗口值2″;
aform.action=”c.html“;
aform.submit();
} 

将 b.html 中的 func1() 修改为如下:

 
function func1(){
var pwin = window.dialogArguments;
if(pwin!=undefined){
var codeStr = ”func();”
pwin.execScript(codeStr,”javascript”);
window.close();
} 
} 

showModalDialog 与 showModelessDialog 使用心得

showModalDialog 和 showModelessDialog 使用心得-转载

showModalDialog：被打开后就会始终保持输入焦点。除非对话框被关闭，否则用户无法切换到主窗口。其运行效果类似 alert。

showModelessDialog：被打开后，用户可以随机切换输入焦点。对主窗口没有任何影响（最多只是被遮挡一下）。

在被打开的网页里加上 <base target=”_self”> 即可。这句话一般放在 <html> 和 <body> 之间。

在 showModalDialog 和 showModelessDialog 里不能按 F5 刷新，也不能弹出菜单。这只能依靠 javascript 实现，以下是相关代码：

<body onkeydown=”if (event.keyCode==116){reload.click()}”>

<a id=”reload” href=”filename.htm” style=”display:none”>reload…</a>

将 filename.htm 替换成网页的名字，然后将其放到你打开的网页里。按 F5 即可刷新，注意，这个要配合 <base target=”_self”> 使用，否则按下 F5 会弹出新窗口。

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

也要配合 <base target=”_self”>，否则会打开一个新的 IE 窗口，然后再关掉。

(作者语：本来想用一问一答形式来写的，但是我想不出这个怎么问，所以只好这样了。)

这个东西比较麻烦，我改了好几次了不是没办法说明白(语文水平越来越差了)，只好用个例子说明了。

数据传递技巧与局限性分析

现在需要在一个 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_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元素的值“

因为光说很费劲，我就偷点懒，直接用代码来说了，如果不明白的话那就直接来信(oyiboy#163.net(使用时请将#改成@))问我吧。

多个 showModelessDialog 的相互操作

以下代码的主要作用是在一个 showModelessDialog 里移动另一个 showModelessDialog 的位置。

主文件的部份 js 代码。

 
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 之间的位置操作功能，通过这个原理，在 showModelessDialog 之间相互控制各自的显示页面，传递变量和数据等。这要看各位的发挥了