HTML 父窗口打开子窗口，并接收子窗口返回的值.zip

HTML 和 JavaScript 是网页开发中的两种基础技术，它们在创建交互式和动态网页方面发挥着重要作用。在这个名为"HTML 父窗口打开子窗口，并接收子窗口返回的值"的示例中，我们主要探讨如何利用JavaScript在HTML页面中打开新的子窗口，并在子窗口与父窗口之间进行通信，传递数据。 `index.html`很可能是主页面，它将通过JavaScript函数打开一个新窗口。在JavaScript中，我们可以使用`window.open()`方法来实现这一功能。这个方法接受两个参数：要打开的URL和新窗口的名称。例如： ```javascript var childWindow = window.open('b.html', '子窗口名'); ``` 这里的`b.html`是子窗口的页面，`子窗口名`是一个可选的标识符，用于引用新窗口。 在`b.html`中，我们可以执行一些操作，比如用户交互或数据处理。然后，如果我们需要将数据返回给父窗口，可以使用`window.opener`属性，它是对打开当前窗口的窗口的引用。例如，假设我们在`b.html`中有一个按钮，当点击按钮时，将数据返回给父窗口： ```html <button onclick="returnData()">返回数据</button> <script> function returnData() { var data = "这是从子窗口返回的数据"; window.opener.postMessage(data, "*"); window.close(); } </script> ``` 这里，我们使用`postMessage()`方法向父窗口发送数据，`*`表示任何源都可以接收到消息。在父窗口中，我们需要监听`message`事件来接收子窗口发送的数据： ```javascript window.addEventListener("message", function(event) { if (event.origin !== "http://你的网站地址") return; // 验证来源安全 console.log("从子窗口接收到的数据:", event.data); }, false); ``` 确保在父窗口中设置适当的事件监听器，以便在接收到子窗口的消息时执行相应的操作。 放置这些文件在一个web服务器如nginx的HTML目录下是必要的，因为浏览器的同源策略（Same-Origin Policy）限制了跨域访问，而本地文件系统不被视为同源。在web服务器上，所有文件被视为同一域，从而允许父子窗口之间的通信。 这个压缩包提供的示例展示了如何在HTML页面中使用JavaScript打开子窗口，以及如何在子窗口与父窗口之间通过`postMessage()`和`message`事件进行数据传递。这在实现多窗口应用程序或者在弹出窗口中进行用户操作并返回结果到主窗口时非常有用。