window.open 打开窗口的子画面向父级画面传值并返回父画面(幅画面不刷新)

**Window.open() 的使用**

在网页开发中，`window.open()` 是一个常用的函数，可以用来打开新的窗口或弹出层。然而，在某些情况下，我们可能需要将子窗口的数据传递给父级窗口，而不刷新父级窗口。这篇文章将介绍如何使用 `window.open()` 打开窗口的子画面向父级画面传值并返回父画面。

**问题描述**

假设我们有一个网页，包含一个按钮和一个文本框。点击按钮时，我们希望打开一个新的窗口，输入一些数据后再关闭这个窗口，并将输入的数据传递给父级窗口，而不刷新父级窗口。

**解决方案**

为了实现上述功能，我们可以使用 `window.open()` 函数打开一个新的窗口，然后在子窗口中收集用户输入的数据。最后，在子窗口关闭时，将数据传递给父级窗口。

下面是示例代码：

html<!-- 父级窗口 -->
<button id="open-window">点击打开窗口</button>
<div id="result"></div>

<script>
 // 获取按钮元素 const button = document.getElementById('open-window');

 // 绑定点击事件 button.addEventListener('click', function() {
 // 打开新的窗口 const window = window.open('', '_blank', 'width=300,height=200');
 // 在子窗口中收集用户输入的数据 window.onblur = function() {
 // 获取子窗口中的文本框元素 const input = window.document.getElementById('input');

 // 将输入的数据传递给父级窗口 document.getElementById('result').innerHTML = input.value;
 };
 });
</script>

html<!-- 子窗口 -->
<input id="input" type="text">
<button id="close-window">关闭窗口</button>

<script>
 // 获取按钮元素 const button = document.getElementById('close-window');

 // 绑定点击事件 button.addEventListener('click', function() {
 // 关闭子窗口 window.close();
 });
</script>