小结:利用PostMessage实现Web中的跨文档通信

2024-01-08 13:06:13

本周开发项目时,做了一个技术小结,帮助快速理解 & 使用 PostMessage。

PostMessage是通信API,它允许不同窗口之间进行跨文档通信,包括同源和跨源的通信。

基本使用方法

使用PostMessage非常简单,主要包括两个步骤:发送消息和接收消息。

发送消息

在发送消息的窗口中,使用postMessage方法:

// 发送消息的窗口
var targetWindow = window.parent; // 或者指定其他窗口
var message = 'Hello, this is a message!';
targetWindow.postMessage(message, 'https://example.com');

接收消息

在接收消息的窗口中,监听message事件:

// 接收消息的窗口
window.addEventListener('message', function(event) {
  // 确保消息是从期望的源发来的
  if (event.origin === 'https://example.com') {
    // 处理收到的消息
    console.log('Received message:', event.data);
  }
});

注意事项

在使用PostMessage时,需要注意一些事项:

  1. 安全性考虑:验证消息来源,使用event.origin属性验证消息的来源,防止恶意攻击。
  2. 精细化控制:精确指定目标窗口,减少安全风险postMessage(message, target);。
  3. 数据序列化:确保要传递的数据可以被序列化为字符串,使用JSON.stringifyJSON.parse进行处理。
  4. 避免循环:小心避免形成消息循环,防止无限递归。

简单示例

一个简单的例子是在一个窗口中点击按钮触发消息,另一个窗口接收并处理该消息:

// 发送消息的窗口
function sendMessage() {
  var message = { type: 'buttonClick', data: 'Button clicked!' };
  window.parent.postMessage(message, 'https://example.com');
}

// 接收消息的窗口
window.addEventListener('message', function(event) {
  if (event.origin === 'https://example.com' && event.data.type === 'buttonClick') {
    // 处理接收到的消息
    console.log('Received button click event:', event.data.data);
  }
});

文章来源:https://blog.csdn.net/qq_37834631/article/details/135410580
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。