JavaScript窗口其间值传递―模态与非模态窗口之间传值 _JavaScript

JavaScript窗口之间值传递―模态与非模态窗口之间传值

模态与非模态窗口之间传值

???????? 所谓模态对话框，就是指除非采取有效的关闭手段，用户的鼠标焦点或者输入光标将一直停留在其上的对话框。非模态对话框则不会强制此种特性，用户可以在当前对话框以及其他窗口间进行切换。

父窗口代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
	var win;
	// 打开模态窗口
	function open_modalDialog() {		
		window.showModalDialog("son.html", window, "dialogHeight:300px, dialogWidth:150px");			
	}
	// 打开非模态窗口
	function open_modalessDialog() {
		// 获得非模态子窗口的对象
		win = window.showModelessDialog("son.html", window, "dialogHeight:300px, dialogWidth:150px");		
	}
	
	// 给打开的模态窗口赋值
	function test_child() {
		var age = win.document.getElementsByName("age")[0];
		age.value = 20;
		alert(age.value);
	}
	
	// 不能为非模态窗口赋值，因为用户必须要操作完非模态窗口后，才能操作父窗口
</script>

</head>
<body>
	用户名：<input type="text" name="username" /><br />
    <input type="button" value="打开模态窗口" onclick="open_modalDialog()" /><br />
    <input type="button" value="打开非模态窗口" onclick="open_modalessDialog()" /><br />
    <input type="button" value="给子窗口赋值" onclick="test_child()" /><br />
</body>
</html>

子窗口代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
	// 子窗口给父窗口赋值(模态)
	function test_parent() {
		// 获得父窗口的对象
		var parentwin = window.dialogArguments;
		var username = parentwin.document.getElementsByName("username")[0];
		username.value = "keveon";
		alert(username.value);		
	}		
</script>
</head>
<body>
	年龄：<input type="text" name="age" /><br />    
    <input type="button" value="给父窗口赋值" onclick="test_parent()" />    
</body>
</html>