本文介绍如何利用JavaScript的showModalDialog方法实现浏览器窗口间的参数传递。通过定义自定义对象并传入dialogArguments,主页面可将数据传递给子窗口,子窗口再通过回调函数将处理结果返回给主页面,完成双向数据交互。
主页面参数传递实现
在a.html主页面中,首先定义一个名为OpenNew的函数用于触发窗口打开操作。该函数内部实例化一个自定义对象im,其结构由IDAndMethod构造函数定义,包含ID属性和SetTxt方法。获取输入框txtID的值赋给im.ID,随后调用window.showModalDialog打开名为ddd.html的子窗口,并将对象im作为第二个参数传递,第三个参数设为空字符串。页面主体包含一个文本输入框txtID和一个按钮,点击按钮时执行OpenNew函数。
<html>
<head>
<title>主页面</title>
<script language="javascript" type="text/javascript">
function OpenNew()
{
var im=new IDAndMethod();
im.ID=document.getElementById("txtID").value;
window.showModalDialog("ddd.html",im,"");
}
function IDAndMethod()
{
this.ID="ddd";
this.Method=SetTxt;
}
function SetTxt(str)
{
document.getElementById("txtID").value=str;
}
</script>
</head>
<body>
<form action="#">
<input id="txtID" style="width:400px" type="text" value="XXX!在这里输入ID!" /><br />
<input type="button" value="打开新的窗口" onclick="OpenNew()" />
</form>
</body>
</html>
子页面数据接收与回传
在b.html(即ddd.html)子页面中,定义全局变量im用于接收传递的对象。页面加载时执行Load函数,通过window.dialogArguments获取主页面传入的对象im。判断im.ID的值,若为默认提示文本则显示错误提示,否则将im.ID的值显示在输入框txtID1中。定义Set函数,点击“传递数据”按钮时执行,该函数调用im对象中保存的SetTxt方法,并将当前txtID1的值作为参数传入,从而将数据回传至主页面。
<html>
<head>
<title>主页面</title>
<script language="javascript" type="text/javascript">
var im;
function Load()
{
im=window.dialogArguments;
if(im.ID=="XXX!在这里输入ID")
document.getElementById("txtID1").value="你杂不输入呢!";
else
document.getElementById("txtID1").value=im.ID;
}
function Set()
{
im.Method(document.getElementById("txtID1").value);
}
</script>
</head>
<body onload="Load()">
<form action="#">
<input id="txtID1" style="width:400px" type="text" value="ddd" /><br />
<input type="button" value="传递数据" onclick="Set()" />
</form>
</body>
</html>