JavaScript example: 弹出窗口,并且相互传值

pouyang

浏览: 321632 次
性别:
来自: 北京

最近访客更多访客>>

vliu

songhait

liuminghan0617

daotadefeng

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

JavaScript Windows HTML

窗口之间的传值当然要用到dialogArguments,看api英文解释
dialogArguments Property:
   Retrieves the variable or array of variables passed into the modal dialog window.
Remarks(备注)
The dialogArguments property applies only to windows created using the showModalDialog and showModelessDialog methods.

主要步骤或者思路就是:
1 父窗口parent.htm调用 window.showModalDialog("children.htm", myObject, "dialogHeight:300px; dialogLeft:200px;");
或者window.showModalDialog("children.htm", window, "dialogHeight:300px; dialogLeft:200px;");真正实际当中第二种用得比较的多,除了局部变量其它所有的值都可以得到.

2 子窗口children.htm
    2.1 子窗口显示: 调用window.dialogArguments可以得到传过来的值,如果传过来的是window,那么父页面的所有元素,子窗口都可以得到(除了局部变量),得到之后就可以进行显示了，
   2.2 子窗口修改值并返回:
window.dialogArguments.firstName = document.getElementById('a').value;
window.dialogArguments.lastName = document.getElementById('b').value;
window.close();
父窗口就可以得到子窗口修改过的值
如果传过来的是window，就可以这样用：
window.dialogArguments.document.getElementById("searchbutton").click();


先上效果图,

以下是例子代码注释很详细:
parent.htm

<HTML>
<HEAD>
<SCRIPT>
// var bb = 'oyp'; 
//in the new modal window Like this 'window.dialogArguments.bb' can get this value

	function fnLaunch() {
		var aForm;
		aForm = oForm.elements;
		var myObject = new Object();
		myObject.firstName = aForm.oFirstName.value;
		myObject.lastName = aForm.oLastName.value;


//The object "myObject" is sent to the modal window.
//It can also be written like this:
//window.showModalDialog("x.htm",window, "dialogHeight:300px; dialogLeft:200px;");
//The window parameter  is passed in the method
//in the new modal window. alert(window.dialogArguments.oForm.elements.oFirstName.value);
//alert(window.dialogArguments.bb); 当然这个var bb 必须是全局变量才能这样得到，局部变量不行
// if like this 
//var bb = '1111111111';
//window.showModalDialog("b.htm", bb, "dialogHeight:300px; dialogLeft:200px;");
//alert(window.dialogArguments); 可以得到这个局部变量
// The object "myObject" is sent to the modal window.
// Here, I just pass this object in the method only!!
//在children.htm可以对myObject进行处理，然后返回

                    window.showModalDialog("children.htm", myObject, "dialogHeight:300px; dialogLeft:200px;");
		if (myObject.firstName != '') {
			document.getElementById('oFirstName').value = myObject.firstName;
		} if (myObject.lastName != '') {
			 document.getElementById('oLastName').value = myObject.lastName;
		}
	}
</SCRIPT>
</HEAD>
<BODY>
	<BUTTON onclick="fnLaunch();" >Launch The Window</BUTTON>
	<FORM ID= "oForm">
			First Name:
			<INPUT TYPE="text" NAME="oFirstName" VALUE="Jane">
			<BR>
			Last Name:
			<INPUT TYPE="text" NAME="oLastName" VALUE="Smith">
	</FORM>
</BODY>
</HTML>

children.htm

<HTML>
<HEAD>
<SCRIPT>
	var oMyObject = window.dialogArguments; //得到父窗口传递过来的对象
		var sFirstName = oMyObject.firstName;
	var sLastName = oMyObject.lastName;
</SCRIPT>
<title>Untitled</title>
</head>
<BODY STYLE="font-family: arial; font-size: 14pt; color: Snow;background-color: RosyBrown;">
      <!--显示父窗口传递过来的数据-->
		First Name:
		<SPAN STYLE="color:00ff7f">
		<SCRIPT>
		document.write(sFirstName);
		</SCRIPT>
		</SPAN>
		<BR>
		Last Name:
		<SPAN STYLE="color:00ff7f">
		<SCRIPT>
		document.write(sLastName);
		</SCRIPT>
		</SPAN>
	   <!-- end -->

      <!--子窗口设置父窗口传递过来的值并进行返回-->
		<script>
			function setValue() {
				window.dialogArguments.firstName = document.getElementById('a').value;
				window.dialogArguments.lastName = document.getElementById('b').value;
				window.close();
			}
		</script>
      <br>
	  First Name:<input  type ='text' id = 'a' ><br> 
      Last Name: <input  type ='text' id = 'b' ><br>    
      <input  type = 'button' value = '提交' onclick = 'setValue()' >
      <input  type = 'button' value = '返回' onclick = 'JavaScript:window.close()' >
	  <!--end-->
</BODY>
</HTML>

分享到：

JavaScript example: js验证,null,各种正则 ... | JavaEye javascript面向对象技术基础(六)

2010-03-05 10:33
浏览 2600
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论