在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代码如下：


当点击“打开新窗口”按钮时，会打开新窗口newpage.html并向其传递数据。在新窗口中，用户输入内容并提交表单时，会将输入内容传递回主窗口并在主窗口中显示。
示例二：在子窗口中显示主窗口中选择的图片
HTML代码如下：


当在主窗口中点击图片时，会打开一个子窗口newpage.html并在子窗口中显示主窗口中选择的图片。