JavaScript使用showModalDialog实现窗口间参数传递

作者:小括号

时间:2026-10-28

浏览:509

本文介绍如何利用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>

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章