深入了解 Broadcast Channel API 与 IFrame 的结合使用

fake_worker

已于 2024-09-26 15:55:43 修改

阅读量971

点赞数 8

文章标签：前端 javascript

于 2024-09-26 15:54:24 首次发布

本文链接：https://blog.csdn.net/Have_No_Heart/article/details/142559744

版权

前言

跟随着公司通过微前端架构开发低代码平台时，发现了个问题，公司选用的是通过iframe来嵌套一个个小项目，既然属于一个大项目，那必定避免不了通讯的问题。

原本使用的是postMessage来传输数据，该方式的优点显而易见，支持跨源通信。但是这也成了一个大问题：浏览器中避免不了会装一些学习插件，这些插件有的也会使用该方式，所以会有互相影响的顾虑。

于是在 MDN 网站闲逛的过程中发现了一种新兴的机制——Broadcast Channel API。本文将深入探讨 Broadcast Channel API 的概念、用法以及如何与 IFrame 结合实现高效的数据传输。

什么是 Broadcast Channel API？

Broadcast Channel API 是一种允许在同一源的不同浏览器上下文（如不同标签页、窗口或 IFrame）之间进行通信的机制。它提供了一个简单的 API，使得消息可以在多个窗口、标签页或 IFrame 之间发布和订阅，从而实现高效的数据同步。

特点

同源策略：Broadcast Channel API 仅在同源的上下文中工作，即 URL 需具有相同的协议、主机和端口。
简单易用：提供了简洁的接口，使得发送和接收消息的操作变得简单。
异步通信：消息的发送和接收都是异步的，允许开发者在后台进行其他操作。

如何使用 Broadcast Channel API？

1. 创建一个 Broadcast Channel

要使用 Broadcast Channel API，首先需要创建一个 BroadcastChannel 实例，并指定一个频道名称。这个频道名称用于识别发送和接收消息的上下文。

const channel = new BroadcastChannel('my-channel');

2. 发送消息

使用 postMessage 方法可以向频道发送消息。这个消息可以是字符串、对象、数组等任何支持的 JavaScript 数据类型。

channel.postMessage('Hello from main window!');

3. 接收消息

要接收消息，需要监听 message 事件。每当其他上下文通过同一频道发送消息时，都会触发此事件。

channel.onmessage = (event) => {
    console.log('Received:', event.data);
};

4. 关闭频道

当不再需要与频道进行通信时，可以调用 close 方法关闭该频道。

channel.close();

结合 IFrame 的示例

以下是一个简单的示例，演示如何使用 Broadcast Channel API 在主窗口和 IFrame 之间进行通信。

主窗口 HTML 文件（index.html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Broadcast Channel with IFrame</title>
</head>
<body>
    <input type="text" id="messageInput" placeholder="Type a message" />
    <button id="sendMessage">Send to IFrame</button>
    
    <iframe id="myIframe" src="iframe.html" width="400" height="200"></iframe>

    <script src="main.js"></script>
</body>
</html>

IFrame HTML 文件（iframe.html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IFrame</title>
</head>
<body>
    <h2>Messages from Main Window</h2>
    <div id="messages"></div>
    
    <script src="iframe.js"></script>
</body>
</html>

主窗口 JavaScript 文件（main.js）

const channel = new BroadcastChannel('my-channel');

// 发送消息到 IFrame
document.getElementById('sendMessage').addEventListener('click', () => {
    const message = document.getElementById('messageInput').value;
    channel.postMessage(message);
});

IFrame JavaScript 文件（iframe.js）

const channel = new BroadcastChannel('my-channel');

// 监听来自主窗口的消息
channel.onmessage = (event) => {
    const messageDiv = document.getElementById('messages');
    messageDiv.innerHTML += `<p>Received: ${event.data}</p>`;
};

使用场景

多标签页和 IFrame 的数据同步：在用户打开多个标签页或 IFrame 时，Broadcast Channel API 可以用来同步状态，例如表单数据、购物车内容等。
实时更新：当主窗口或 IFrame 中的用户做出更改时，其他上下文可以即时更新显示，以提升用户体验。
跨组件通信：在复杂的应用中，Broadcast Channel API 可以用于实现主窗口和 IFrame 之间的通信，避免使用复杂的状态管理方案。