父窗口和子窗口通信 opener

父窗与子窗通信

最新推荐文章于 2019-10-04 22:52:42 发布

原创最新推荐文章于 2019-10-04 22:52:42 发布 · 716 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javascript基础部分学习专栏收录该内容

51 篇文章

订阅专栏

本文介绍了一个简单的HTML与JavaScript实现的父窗口与子窗口之间的通信案例。通过使用`window.open`方法打开新窗口，并利用`document.getElementById`来操作DOM元素，实现了父窗口向子窗口传递信息以及子窗口向父窗口反馈的功能。

父窗口

<html>
<head>
	<script language = "javascript" type = "text/javascript">
		<!--
		  var newWindow;
			function test2(){
				newWindow = window.open("newWindow.html","_blank");	
			}
			function test3(){
				
				var val = document.getElementById("mytext");
				//window.alert(val.value);
				newWindow.document.getElementById("info").value = val.value;
			}
		-->
	</script>	
</head>	
<body>
	我是一个窗口
	<input type = "button" onclick = "test2()" value = "打开新窗口">
	<span id = "myspan">消息</span>
	<input id = "mytext" type = "text" value = "" />
	<input type = "button" value = "通知给子窗口" onclick = "test3();"/>
</body>
</html>

子窗口

<script language = "javascript" type = "text/javascript">
	function notify(){
		var val = document.getElementById("info").value;	
		opener.document.getElementById("myspan").innerText = val;
		
	}	
</script>
我是新窗口
<input type = "text" value = "" id = "info"/>
<input type = "button" value = "通知给父窗口" onclick = "notify();"/>