什么是 Channel Messaging API?

Channel Messaging API 是 HTML5 新增的 API 之一,它允许在不同的浏览上下文(例如不同的窗口、标签页或者 iframe)之间安全地传递数据。

主要特性包括:

  • 消息传递: 可以在不同的浏览上下文之间传递数据。
  • 安全性: 通过同源策略保证安全传输数据。
  • 异步通信: 使用异步消息传递方式进行通信。

如何使用 Channel Messaging API

1. 创建一个消息通道

javascript 复制代码
// 在主页面中创建一个消息通道
var channel = new MessageChannel();

// 获取通道的端口
var port1 = channel.port1;
var port2 = channel.port2;

2. 发送消息

javascript 复制代码
// 在主页面中发送消息
port1.postMessage({ message: 'Hello from main page!' });

3. 接收消息

javascript 复制代码
// 在从页面中接收消息
port2.onmessage = function(event) {
  console.log('Received message:', event.data.message);
};

4. 传递端口

javascript 复制代码
// 在从页面中发送消息
port2.postMessage({ message: 'Hello from sub page!' });

// 在主页面中接收消息
port1.onmessage = function(event) {
  console.log('Received message:', event.data.message);
};

示例

主页面

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Main Page</title>
</head>
<body>
  <script>
    var channel = new MessageChannel();
    var port1 = channel.port1;
    var port2 = channel.port2;

    port1.onmessage = function(event) {
      console.log('Received message:', event.data.message);
    };

    port1.postMessage({ message: 'Hello from main page!' });
  </script>
</body>
</html>

从页面

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sub Page</title>
</head>
<body>
  <script>
    var channel = new MessageChannel();
    var port1 = channel.port1;
    var port2 = channel.port2;

    port2.onmessage = function(event) {
      console.log('Received message:', event.data.message);
    };

    port2.postMessage({ message: 'Hello from sub page!' });
  </script>
</body>
</html>

总结

Channel Messaging API 提供了一种安全、高效的跨浏览上下文通信方式,适用于需要在不同窗口或者 iframe 之间传递数据的场景。

相关推荐
WEI_Gaot3 分钟前
zustand 基础和进阶
前端·react.js
程序员Qian5 分钟前
从开发天气MCP服务入门什么是MCP
前端
用户2031196600967 分钟前
sheet的基本用法
前端
Tang102412 分钟前
Glide 4.x 的 Bitmap 资源复用机制详解
面试
Tang102412 分钟前
Glide 4.x 线程池管理模块解析
面试
火星思想13 分钟前
都2025年了,还在问构建工具是干嘛的?
前端·前端框架·设计
Tang102415 分钟前
Glide 4.x 三级缓存模块的实现原理
面试
杨进军16 分钟前
MutationObserver 实现 iframe 自适应高度
前端
火星思想17 分钟前
Promise 核心知识点(非基础)
前端·javascript·面试
前端大白话18 分钟前
炸裂!10个 React 实战技巧,让你的代码从“青铜”秒变“王者”
前端·javascript·react.js