JavaScript iframe 实现多窗口通信实例详解

当我们在一个页面中嵌入多个 iframe 元素时，它们之间的通信就变得比较复杂。但是，我们可以使用 JavaScript 来实现 iframe 之间的通信。在本文中，我们将深入讨论如何使用 JavaScript，通过 iframe 实现多窗口通信的过程和相关的示例代码。

iframe 与 JavaScript

iframe 元素允许我们在当前页面中嵌入另一个页面，通过它可以方便地实现一些功能，比如异步加载、多页面容器等。但是，由于涉及到跨域的问题，iframe 之间的通信有时比较困难，这时候就需要使用 JavaScript 来实现。

实现过程

父窗口向子窗口通信

如果我们想在当前页面中的一个 iframe 中向另一个 iframe 发送消息，可以通过以下步骤实现：

获取子 iframe 元素对象：

javascript const iframe = document.getElementById("iframe");

使用 contentWindow 属性获取子窗口对象：

javascript const childWindow = iframe.contentWindow;

向子窗口发送消息：

javascript childWindow.postMessage("Hello child window!", "http://localhost:8080");

postMessage 方法的第一个参数为传递的消息内容，第二个参数为可选项，用于指定接收消息的窗口地址。如果要限制发送消息的窗口地址，可以使用 targetOrigin 参数。

注意：在发送消息的同时，需要指定接收消息的窗口地址，这可以避免恶意窗口向其他页面发送消息。

子窗口接收消息：

在发送消息的同时，我们还需要在子窗口中监听并接收父窗口发送的消息，可以通过以下代码实现：

javascript window.addEventListener("message", (event) => { if (event.origin !== "http://localhost:3000") { console.log(`Received message from parent window: ${event.data}`); } });

message 事件会在收到消息时触发，通过判断 event.origin，可以避免接收来自不被信任的窗口发送的消息。

子窗口向父窗口通信

如果我们想在子窗口中向父窗口发送消息，也可以通过类似的方式实现：

获取父窗口对象：

javascript const parentWindow = window.parent;

向父窗口发送消息：

javascript parentWindow.postMessage("Hello parent window!", "http://localhost:3000");

父窗口接收消息：

在父窗口中监听子窗口发送的消息，可以通过以下代码实现：

javascript window.addEventListener("message", (event) => { if (event.origin === "http://localhost:8080") { console.log(`Received message from child window: ${event.data}`); } });

同样需要判断接收消息的窗口地址，避免接收来自不被信任的窗口发送的消息。

示范代码

以下两个示例说明了如何使用 JavaScript 实现 iframe 之间的通信：

父窗口向子窗口通信示例

<!-- parent.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>Parent Window</title>
  </head>
  <body>
    <h1>Parent Window</h1>
    <iframe id="child" src="child.html"></iframe>
    <script>
      const iframe = document.getElementById("child");
      const childWindow = iframe.contentWindow;
      childWindow.postMessage("Hello child window!", "http://localhost:8080");

      window.addEventListener("message", (event) => {
        if (event.origin !== "http://localhost:3000") {
          console.log(`Received message from child window: ${event.data}`);
        }
      });
    </script>
  </body>
</html>

<!-- child.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>Child Window</title>
  </head>
  <body>
    <h1>Child Window</h1>
    <script>
      window.addEventListener("message", (event) => {
        if (event.origin !== "http://localhost:8080") {
          console.log(`Received message from parent window: ${event.data}`);
        }
      });
    </script>
  </body>
</html>

在上面的代码中，父窗口页面中嵌入了 child.html 页面，然后父窗口向子窗口发送消息，子窗口接收消息并输出到控制台中，父窗口也接收子窗口发送的消息，同样输出到控制台中。

子窗口向父窗口通信示例

<!-- parent.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>Parent Window</title>
  </head>
  <body>
    <h1>Parent Window</h1>
    <iframe id="child" src="child.html"></iframe>
    <script>
      window.addEventListener("message", (event) => {
        if (event.origin === "http://localhost:8080") {
          console.log(`Received message from child window: ${event.data}`);
        }
      });
    </script>
  </body>
</html>

<!-- child.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>Child Window</title>
  </head>
  <body>
    <h1>Child Window</h1>
    <button onclick="sendMessage()">Send Message to Parent</button>
    <script>
      function sendMessage() {
        const parentWindow = window.parent;
        parentWindow.postMessage("Hello parent window!", "http://localhost:3000");
      }
    </script>
  </body>
</html>

在上面的代码中，子窗口中包含一个按钮，当用户点击按钮时，子窗口会向父窗口发送消息，并输出到控制台中，父窗口也接收到子窗口的消息，同样输出到控制台中。

总结

在本文中，我们通过示例代码详细讲解了如何使用 JavaScript 实现 iframe 之间的通信，包括父窗口向子窗口通信以及子窗口向父窗口通信两种场景。希望对大家有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript iframe 实现多窗口通信实例详解 - Python技术站

JavaScript iframe 实现多窗口通信实例详解

JavaScript iframe 实现多窗口通信实例详解

iframe 与 JavaScript

实现过程

父窗口向子窗口通信

子窗口向父窗口通信

示范代码

父窗口向子窗口通信示例

子窗口向父窗口通信示例

总结

相关文章