window.open打开窗口并获取返回值例子

最新推荐文章于 2025-05-13 11:45:00 发布

原创最新推荐文章于 2025-05-13 11:45:00 发布 · 7.5k 阅读

1 ·

CC 4.0 BY-SA版权

javascript原生同时被 2 个专栏收录

23 篇文章

订阅专栏

jQUERY

10 篇文章

订阅专栏

此博客介绍了如何在JavaScript中利用window.open函数打开新窗口，并强调了该操作必须在服务器环境中执行。同时，内容涉及到父子窗口间的数据交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注意得运行在服务器中！不能直接打开文件。

父窗口

<!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-Language" content="utf-8" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="author" content="ޅѾ֮ݒ(MyZ)" /> 
<meta name="Copyright" content="ޅѾ֮ݒ(MyZ)" /> 
<meta name="description" content="" /> 
<meta name="keywords"content="" /> 
<link rel="icon" href="" type="image/x-icon" /> 
<link rel="shortcut icon" href="" type="image/x-icon" /> 
<link href="" rel="stylesheet" type="text/css" /> 
<title></title> 
<style  type="text/css">
#bigbox > div{border:1px solid red;margin:10px;padding:10px;width:200px;float:left;}
</style>

<script type="text/javascript"> 
<!-- 
function winOpen() 
{ 
       window.open ("test22.html", "", "height=400, width=400,top=200,left=400"); 
} 
--> 
</script> 
</head> 
<body> 
 <body> <div id="bigbox" >
 <div>
 <div>姓名：黎明</div>
 <div>标题：你好</div>
 <div>内容：今天天气不错！</div>
 </div>
 
 </div>
<input type="button" value="添加" name="submit" onclick="javascript:winOpen();" /> 
</body> 
</html> 
</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-Language" content="utf-8" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="author" content="ޅѾ֮ݒ(MyZ)" /> 
<meta name="Copyright" content="ޅѾ֮ݒ(MyZ)" /> 
<meta name="description" content="" /> 
<meta name="keywords"content="" /> 
<link rel="icon" href="" type="image/x-icon" /> 
<link rel="shortcut icon" href="" type="image/x-icon" /> 
<link href="" rel="stylesheet" type="text/css" /> 
<title></title> 
<script type="text/javascript"> 
<!-- 
function winBack() 
{ 
		var h=document.getElementById("name").value;
		var i=document.getElementById("title").value;
		var v=document.getElementById("content").value;
       if(window.opener) { 
              fWindowText1 = window.opener.document.getElementById("bigbox");

			  var bigboxDiv = document.createElement("div");
			  var myDiv = document.createElement("div");
			  var text = document.createTextNode("姓名："+h);
			  myDiv.appendChild(text);
			  bigboxDiv.appendChild(myDiv);
			  var myDiv2 = document.createElement("div");
			  var text = document.createTextNode("标题："+i);
			  myDiv2.appendChild(text);
			  bigboxDiv.appendChild(myDiv2);
			  var myDiv3 = document.createElement("div");
			  var text = document.createTextNode("内容："+v);
			  myDiv3.appendChild(text);
			  bigboxDiv.appendChild(myDiv3);
			  fWindowText1.appendChild(bigboxDiv);
			  //alert(myDiv.childNodes[0].nodeValue);
              //fWindowText1.value = fWindowText1.value + h; 
              window.close(); 
       } 
} 
--> 
</script> 
</head> 
<body> 姓名：<textarea id="name" name="text1"></textarea></br>
标题：<textarea id="title" name="text1"></textarea></br>
内容：<textarea id="content" name="text1"></textarea></br>
<input type="button" name="back" value="back" onclick="javascript:winBack();" /> 
</body> 
</html>