最近使用 showModalDialog 打开有模窗口,发现子窗口通过父窗口传一个固定id值,然后子窗口通过id值去给父窗口表单赋值,不好弄。
今天写了一个测试案例:
父窗口:test1.jsp
script type="text/javascript">
function test1(id){
window.showModalDialog("test2.jsp?id="+id+"",window,"dialogWidth=200px;dialogHeight=100px");
}
</script>
</head>
<body>
<input name='test(123)' id='test(123)'>
<input type="button" οnclick="test1('123');" value="test1">
</body>
</html>
(注意:实际中name属性中的123是动态的)
子窗口:test2.jsp
<script type="text/javascript">
function closeT(){
var parentWin=window.dialogArguments;
var param = ${param.id};
param ='test('+param+')';
if (parentWin.document.getElementById(param) != null){
parentWin.document.getElementById(param).value=document.getElementById("test2").value;
}
}
</script>
</head>
<body οnunlοad="closeT();">
<input type="text" id="test2" name="test2"/>
</body>
</html>
父窗口打开有模窗口,并且传递动态参数。子窗口操作完毕通过父窗口传递过来的参数再给父窗口表单属性设置值。
重点:
1、父窗口通过showModalDialog使用url传递参数,在实际传递参数时候传递window对象(便于操作,实际中无论是传递对象或是其他参数都无法操作)。
2、子窗口得到父窗口window对象通过dom操作父窗口(测试中使用$操作不可用)
补充:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script type="text/javascript">
function test1(id){
window.showModalDialog("test2.html?id="+id+"",window,"dialogWidth=500px;dialogHeight=500px");
}
</script>
</head>
<body>
<form>
<input name='test(123)' id='test(123)'>
<input type="button" οnclick="test1('123');" value="test1">
</form>
</body>
/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script type="text/javascript">
var str;
var parentWin=window.dialogArguments;
function init(){
var url = location.search;//存js获取url?号参数
alert(url);
if(url.indexOf("?") != -1){
var etc = url.indexOf("=");
if(etc != -1){
str = url.substr(etc+1);
}
}
str = 'test('+str+')';
}
function closeT(){
if (parentWin.document.getElementById(str) != null){
parentWin.document.getElementById(str).value = document.getElementById("test(1)").value;
}
}
function dbClick(id){
//处理单选按钮双击事件。通过id中的参数与输入框同步,但是如果添加一个确定按钮,那么就不好选择单选按钮了
//因为要定位文本框内容
alert(id);
if (parentWin.document.getElementById(str) != null){
parentWin.document.getElementById(str).value=document.getElementById("test("+id+")").value;
}
close();
}
</script>
</head>
<body onLoad="init();" οnunlοad="closeT();">
<input name="rdx(1)" type="radio" onDblClick="dbClick(1);">
<input type="text" id="test(1)" name="test(1)"/><br>
</body>
</html>