HTML 在JavaScript中设置回调函数到新窗口

在本文中，我们将介绍如何在JavaScript中设置回调函数到新窗口。通过使用HTML的窗口对象以及JavaScript的事件监听和回调函数，我们可以在打开新窗口时执行所需的操作。

阅读更多：HTML 教程

1. 打开新窗口

首先，我们需要打开一个新的窗口。可以使用HTML的窗口对象window.open()方法来实现。以下是一个打开新窗口的示例代码：

<button onclick="openNewWindow()">打开新窗口</button>

<script>
  function openNewWindow() {
    window.open("https://www.example.com", "_blank");
  }
</script>

在上述代码中，我们在页面上创建了一个按钮，并将window.open()方法绑定到按钮的onclick事件上。window.open()方法打开一个新的窗口，并将其指定为_blank，这意味着将在新窗口中打开链接。

2. 设置回调函数

要在新窗口中设置回调函数，我们需要通过window.open()方法返回的新窗口对象引用。然后，在新窗口上使用JavaScript的addEventListener()方法来监听特定事件，并在事件发生时执行回调函数。以下是一个示例代码：

<button onclick="openNewWindowWithCallback()">打开新窗口并设置回调</button>

<script>
  function openNewWindowWithCallback() {
    var newWindow = window.open("https://www.example.com", "_blank");

    newWindow.addEventListener("load", function() {
      // 回调函数逻辑
      console.log("新窗口加载完成");
    });
  }
</script>

在上述代码中，我们新增了一个名为openNewWindowWithCallback()的函数。这个函数首先通过window.open()方法来打开一个新窗口，并将返回的新窗口对象存储在newWindow变量中。然后，我们使用newWindow.addEventListener()方法来监听新窗口的load事件，并在事件发生时执行回调函数。

3. 示例说明

下面是一个更完整的示例，展示了如何通过回调函数向新窗口传递数据：

<button onclick="openNewWindowWithCallbackAndData()">打开新窗口并传递数据</button>

<script>
  function openNewWindowWithCallbackAndData() {
    var newWindow = window.open("https://www.example.com", "_blank");

    newWindow.addEventListener("load", function() {
      var message = "Hello, 新窗口!";
      newWindow.postMessage(message, "https://www.example.com");
    });

    window.addEventListener("message", function(event) {
      if (event.origin === "https://www.example.com") {
        console.log("新窗口返回的数据:", event.data);
      }
    });
  }
</script>

在这个示例中，我们在新窗口的load事件回调函数中，使用newWindow.postMessage()方法向新窗口传递了一条消息。消息内容为”Hello, 新窗口!”，并指定了目标窗口的源为”https://www.example.com”。接着，在当前窗口的message事件监听器中，我们可以通过event.data访问到新窗口返回的数据。