在Web开发中，我们经常需要在两个窗口之间传递数据，例如在弹出的新窗口中提交表单并将结果传递回主窗口，或者在子窗口中显示主窗口中选择的图片等。JavaScript提供了多种方法来实现窗口之间的数据传递。

JavaScript新窗口与子窗口传值详解

在Web开发中，我们经常需要在两个窗口之间传递数据，例如在弹出的新窗口中提交表单并将结果传递回主窗口，或者在子窗口中显示主窗口中选择的图片等。JavaScript提供了多种方法来实现窗口之间的数据传递。

1.使用window.open()方法创建新窗口

可以使用JavaScript的window.open()方法在新窗口中打开一个链接，例如：

此时，可以通过myWindow对象的document属性访问新窗口中的DOM元素，并将数据传递给新窗口：

因为myWindow对象是新窗口的代表，所以我们可以在主窗口中使用它来访问新窗口中的DOM元素。
2.使用window.opener属性传递数据
在新窗口中，可以使用window.opener属性来访问打开新窗口的主窗口，例如：

此时，可以通过myInput对象获取主窗口中的DOM元素，并将数据传递回主窗口：

因为window.opener属性引用打开新窗口的主窗口，所以我们可以在新窗口中使用它来访问主窗口中的DOM元素。
示例一：在新窗口中提交表单并将结果传递回主窗口
HTML代码如下：
打开新窗口</button>" <p="" id=""result"></p>" <script>="" function="" openwindow()="" {="" var="" mywindow="window.open("newpage.html"," "新窗口",="" "width="500," height="500");" mywindow.data=""这是来自主窗口的数据";" }="" script>="" body>="" html>="" <="" pre="">
" value=""提交">" form>="" <script>="" function="" submitform()="" {="" window.opener.document.getelementbyid("result").innerhtml="document.getElementById("myInput").value;" return="" false;="" }="" document.getelementbyid("myinput").value="window.opener.data;" script>="" body>="" html>="" <="" pre="">
当点击“打开新窗口”按钮时，会打开新窗口newpage.html并向其传递数据。在新窗口中，用户输入内容并提交表单时，会将输入内容传递回主窗口并在主窗口中显示。
示例二：在子窗口中显示主窗口中选择的图片
HTML代码如下：
" <script>="" function="" openwindow()="" {="" var="" mywindow="window.open("newpage.html"," "子窗口",="" "width="500," height="500");" mywindow.image="document.getElementsByTagName("img")[0].src;" }="" script>="" body>="" html>="" <="" pre="">
" <script>="" document.getelementbyid("myimage").src="window.opener.image;" script>="" body>="" html>="" <="" pre="">
当在主窗口中点击图片时，会打开一个子窗口newpage.html并在子窗口中显示主窗口中选择的图片。