费话就不说了,直接看代码......
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>index.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
<!-- 打开一般窗口 -->
function openWin(){
var childWin=window.open("childA.html","一般窗口","height:100px;width:100px;status:no;help:no;scroll:no");
childWin.childFielda.value="一般窗口";
}
<!-- 打开模态窗口 -->
function openModalWin(){
window.param="模态窗口";
var str=window.showModalDialog("childB.html",window,"dialogTop:200px;dialogLeft:300px;status:no;help:no;scroll:no");
if(str!=null){
document.getElementById("valueBack").value=str;
}
}
</script>
</head>
<body>
<input type="button" value="打开一般窗口" οnclick="openWin()" />
<br />
<input type="button" value="打开模态窗口" οnclick="openModalWin()" />
<br />
<input id="valueback" type="text" />
</body>
</html>
childA.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>childA.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function backToWinA(){
window.opener.document.getElementById('valueBack').value=document.getElementById("childFieldaback").value;
}
</script>
</head>
<body>
<p>父口传到一般子窗口的值;
<input id="childFielda" type="text"/>
</p>
<p>一般子窗口传回父页面的值
<input id="childFieldaback" type="text"/>
<input type="button" value="设置主页面值" οnclick="backToWinA()"/>
</p>
</body>
</html>
childB.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>childB.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function backToWinA(){
window.opener.document.getElementById('valueBack').value=document.getElementById("childFieldaback").value;
}
</script>
</head>
<body>
<p>父口传到模态窗口的值;
<input id="childFielda" type="text"/>
</p>
<p>模态子窗口传回父页面的值
<input id="childFieldbback" type="text"/>
<input type="button" value="设置主页面值" οnclick="backToWinB()"/>
</p>
<script type="text/javascript">
window.document.getElementById("childFielda").value=window.dialogArguments.param;
var parentWin=window.dialogArguments;
function backToWinB(){
parentWin.document.getElementById("valueBack").value=document.getElementById("childFieldbback").value;
}
</script>
</body>
</html>
先看一般窗口:
var childWin=window.open("childA.html","一般窗口","height:100px;width:100px;status:no;help:no;scroll:no"); childWin.childFielda.value="一般窗口";
childWin是父窗口引用子窗口对象,那么子窗口怎么引用父窗口对象呢?
window.opener.document.getElementById('valueBack').value=document.getElementById("childFieldaback").value;
window对象中有一个名为"opener"的属性,这一属性表示找开本窗口的父窗口的window对象.
其次我们在看看模态窗口:
var parentWin=window.dialogArguments;
此行代码使子窗口得到父窗口传过来的window对象.