JavaScript 在窗口之间发送数据

我最近开发了一个需要打开弹出窗口的系统。弹出窗口上可以执行特定的操作，而调用该弹出窗口的原始窗口则需要接收该选项。

这听起来可能有点疯狂，但它比你想象的要容易。

在本文中，我们将创建主页面。点击后，它会打开一个新的弹出窗口。
另一个按钮可以向此窗口发送静态消息。

在这个弹出窗口中，用户可以选择三个选项并将选定的选项发送回原点。

您可以在下面的视频中看到此演示。

设置结构

我决定为这个项目创建一个非常简单的设置。
首先创建一个新文件夹，然后在里面创建一个index.html、sub.html和的index.js文件。

让我们从制作内容开始index.html。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Sending messages</title>
  </head>
  <body>
    <p>Welcome. You can click the button below to open a new tab</p>
    <button onclick="openNewWindow()">Open new tab</button>
    <button onclick="sendMessage()">Send message</button>
    <p id="response"></p>
    <script src="index.js"></script>
  </body>
</html>

让我们转到该sub.html页面，它将与索引非常相似。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Sending messages</title>
  </head>
  <body>
    <p>I'm the sub page</p>
    <p id="response"></p>
    <p>Choose your response</p>
    <button onclick="closeWindow(`That's amazing`)">That's amazing</button>
    <button onclick="closeWindow(`Pretty cool`)">Pretty cool</button>
    <button onclick="closeWindow(`Meh, could be cooler`)">
      Meh, could be cooler
    </button>
    <script src="index.js"></script>
  </body>
</html>

使用 JavaScript 在窗口之间发送消息

在本文中，我决定使用一个通用的 JavaScript 文件。不过，你也可以将其拆分成两个文件。

让我们打开index.js文件。
我们首先要添加的是窗口的实际打开方式。

let newWindow;

const openNewWindow = () => {
  const params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,width=300,height=300`;
  newWindow = window.open('sub.html', 'sub', params);
};

我向该函数传递了几个参数window.open。

sub.html：我们要打开的页面
sub：我们要打开的页面的名称（可以是任何内容）
params：此新窗口的选项

你可能也注意到了，我将这个新窗口设置为变量。我们已经看到它通过另一个按钮发送数据。

为了将数据发送到这个新的弹出窗口，我们需要创建sendMessage函数。

const sendMessage = () => {
  newWindow.postMessage({ foo: 'bar' }, '*');
};

这将向包含具有值的对象窗口发送一条新消息foo: bar。

现在我们可以处理接收端了。由于我们使用了该postMessage函数，我们可以订阅当前窗口的消息。

为此，请创建以下监听器。

const response = document.getElementById('response');

window.addEventListener('message', (event) => {
  if (event.data?.foo) {
    response.innerText = event.data.foo;
  }
});

此函数将监听所有消息，如果有消息随foo对象一起进入，它将把响应文本设置为该值。

下一部分是将数据发送回原始窗口。我们在sub.html文件中创建了三个按钮来调用一个closeWindow函数。
让我们继续添加这个函数。

const closeWindow = (message) => {
  window.opener.postMessage({ msg: message }, '*');
  window.close();
};

再次，我们可以利用该postMessage函数，但这次我们在上调用它opener，它指的是原始窗口。

现在让我们修改事件监听器来处理这个特定的消息。

window.addEventListener('message', (event) => {
  if (event.data?.foo) {
    response.innerText = event.data.foo;
  }
  if (event.data?.msg) {
    response.innerText = event.data.msg;
  }
});

瞧，您现在可以使用 JavaScript 在两个窗口之间发送消息。

如果您想查看源代码，我已将其上传到GitHub。

感谢您的阅读，让我们联系起来！

感谢您阅读我的博客。欢迎订阅我的电子邮件简报，并在Facebook或Twitter上与我联系。

文章来源：https://dev.to/dailydevtips1/javascript-sending-data- Between-windows-1ima