JavaScript弹出新窗口后向父窗口输出内容的方法

下面是详细讲解“JavaScript弹出新窗口后向父窗口输出内容的方法”的完整攻略。

方法简介

在 JavaScript 中，我们可以通过打开一个新的窗口来向用户展示一些额外的内容或提供一些额外的功能，但在某些情况下，我们需要将这个新窗口的一些输出或处理结果返回到父窗口中。实现这个功能的方法有很多，下面介绍其中两种。

方法一：使用 window.opener 对象

第一种方法是使用 window.opener 对象。在新打开的窗口中，我们可以使用 window.opener 对象获取到父窗口对象，并对其进行操作。window.opener 对象可用于获取父窗口对象中所有能被子窗口访问的函数和变量，不过需要注意的是，这个对象只在子窗口被父窗口创建时才有值，所以需要在子窗口中检查该对象是否为空。下面是一个示例代码：

// 在父窗口中设置一个全局变量
var myVar = 'Hello from parent window!';

// 在子窗口中调用父窗口的方法
function callParentWindow() {
  if (window.opener) {
    window.opener.alert(myVar);
  } else {
    alert('Parent window not found');
  }
}

以上代码中，我们首先在父窗口中设置了一个全局变量 myVar。在子窗口中，我们通过 window.opener 对象访问到了父窗口，并调用了一个在父窗口中定义的 alert 方法，用于输出 myVar 变量中存储的内容。

方法二：使用 window.postMessage

第二种方法是使用 window.postMessage。这个方法可以在不同窗口间建立一个安全的通信通道，使得我们可以在新窗口中发送一些数据，并在父窗口中通过监听 message 事件来进行接收和处理。window.postMessage 方法需要传递两个参数，第一个参数表示要发送的数据，第二个参数用于通知目标窗口的源（这个参数是可选的，如果不设置，则默认为'*'）。

在父窗口中接收来自子窗口的消息需要依靠 window.addEventListener 方法来监听 message 事件，并在事件处理函数中进行相应的处理。下面是一个示例代码：

// 在父窗口中添加 message 事件监听器
window.addEventListener('message', function(event) {
  if (event.origin === 'http://example.com') {
    alert("Message received from child window: " + event.data);
  } else {
    alert('Unknown message origin');
  }
});

// 在子窗口中发送消息到父窗口窗口
window.opener.postMessage("Hello from child window!", "http://example.com");

以上代码中，我们首先在父窗口中添加了一个 message 事件监听器，用于接收来自子窗口发送的消息。在子窗口中，我们使用 window.opener.postMessage 方法发送了一条消息到父窗口，并指定了目标窗口的源为 http://example.com。在父窗口中，当监听到这个事件后，我们实现了一个简单的判断，根据消息的来源地址输出不同的内容。

总结

以上就是实现“JavaScript弹出新窗口后向父窗口输出内容的方法”的两种方式：使用 window.opener 对象和使用 window.postMessage。不同的方法针对的场景略有不同，但总体来说，window.postMessage 更加安全可靠，也更适合用于在不同窗口间进行通信或传递数据。