【Web技术】在父窗口和子iframe之间发送数据-PostMessage API

Post Message API的替代方案

Channel Messaging API是PostMessage API的一个非常好的替代方案，具有某些优势，如速度和易用性。因此，如果您想跨上下文传输大型JavaScript对象，您可能需要考虑使用Channel Messaging API。如果你想看的话，我有一篇很好的文章和一个演示。

将数据从一个上下文发送到另一个上下文

使用JavaScript，您可以在上下文（即主窗口）之间向iframe传递数据，反之亦然。如果您的主窗口打开了一个新选项卡，您可以将数据从主窗口发送到新选项卡，即使用postMessage（）和Channel Messaging API进行跨窗口通信和数据传输。在这篇文章中，我们将只讨论postMessage API。

让我们现实一点——一些上下文之间交流的例子和所有可能的上下文列表

1.从父窗口向子iframe发送数据：

让我们看看如何将一些数据从父窗口发送到子iframe。

Parent

<div id="app">
  <input id="message" type="text" />
  <button id="sendMessage">Send Message</button>
</div>
<script>
  var button = document.querySelector("#sendMessage");

  function sendMessage() {
    const message = document.querySelector("#message").value;
    const iframe = document.querySelector("iframe");
    iframe.contentWindow.postMessage(message, "*");
  }

  button.addEventListener("click", sendMessage);
</script>

<iframe src="page2.html"></iframe>

Iframe (page2.html)

 

<script>
  window.addEventListener('message', function(event) {
    console.log("Message received from the parent: " + event.data); // Message received from parent
  });
</script>

 

就这样！我们已从父窗口向子iframe发送了一条消息。您可以启动控制台，自己查看消息。或者你也可以看看下面的演示。

2.从子iframe向父窗口发送数据：

从子iframe向父窗口发送一些数据也非常简单。无论何时嵌入iframe，该iframe都将具有对父窗口的引用。您只需要使用PostMessage API通过父窗口的window.parent引用发送数据。

Parent

<script>
  window.addEventListener('message', function(event) {
    console.log("Message received from the child: " + event.data); // Message received from child
  });
</script>

Child iframe code - page2.html

<input type="text" id="messageText" />
<button id="sendMessage">Send Message to Parent</button>
<script>
  var button = document.querySelector("#sendMessage");
  button.addEventListener("click", function () {
    var message = document.querySelector("#messageText").value;
    // Send `message` to the parent using the postMessage method on the window.parent reference.
    window.parent.postMessage(message, "*");
  });
</script>

Demo-向子iframe发送数据和从子ifame发送数据

Demo - Send data to and from the child iframe

DonateHide for now