浅谈postMessage ！！！！

最新推荐文章于 2024-06-03 09:32:46 发布

编代码的小王

最新推荐文章于 2024-06-03 09:32:46 发布

阅读量414

点赞数

文章标签： postman

本文链接：https://blog.csdn.net/xyfwang/article/details/135085997

版权

postMessage 是什么？

postMessage 是 JavaScript 中用于实现跨文档通信（Cross-document messaging）的方法。它允许在不同窗口或 iframe 之间安全地传递数据。通常情况下，这些窗口或 iframe 可能来自同一域或不同域。

postMessage 的基本用法：

// 发送消息
window.postMessage('Hello, other window!', 'https://example.com');

接收消息： 在接收消息的窗口或 iframe 中监听 message 事件：

window.addEventListener('message', (event) => {
  // event.origin 包含消息发送窗口的源
  // event.data 包含发送的数据
  console.log('Received message:', event.data);
});

postMessage 是 JavaScript 中用于实现跨文档通信（Cross-document messaging）的方法。它允许在不同窗口或 iframe 之间安全地传递数据。通常情况下，这些窗口或 iframe 可能来自同一域或不同域。

该方法允许一个文档（document）发送消息到另一个文档，不论这两个文档是否在同一域。它是 HTML5 规范的一部分，为了安全性考虑，有一些限制。

安全性考虑

同源策略： postMessage 会受到同源策略的影响。在不同源的窗口之间使用 postMessage 时，需要明确指定接收方的源。
信任源： 在接收消息时，应该验证消息的来源，以确保它是受信任的源。

例子

以下是一个简单的例子，演示如何在两个窗口

<!-- Window 1 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Window 1</title>
</head>
<body>

<button id="sendMessage">Send Message</button>

<script>
  const button = document.getElementById('sendMessage');

  button.addEventListener('click', () => {
    // 发送消息到 Window 2
    window.postMessage('Hello, Window 2!', 'https://example.com');
  });
</script>

</body>
</html>

<!-- Window 2 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Window 2</title>
</head>
<body>

<p id="receivedMessage">Waiting for message...</p>

<script>
  window.addEventListener('message', (event) => {
    // 验证消息的来源
    if (event.origin === 'https://example.com') {
      const receivedMessage = document.getElementById('receivedMessage');
      // 显示接收到的消息
      receivedMessage.textContent = `Received message: ${event.data}`;
    }
  });
</script>

</body>
</html>

在这个例子中，当你点击 "Send Message" 按钮时，Window 1 会向 Window 2 发送消息，而 Window 2 会监听消息并在页面上显示接收到的消息。

编代码的小王

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
浅谈postMessage ！！！！

是什么？是 JavaScript 中用于实现跨文档通信（Cross-document messaging）的方法。它允许在不同窗口或 iframe 之间安全地传递数据。通常情况下，这些窗口或 iframe 可能来自同一域或不同域。在接收消息的窗口或 iframe 中监听message是 JavaScript 中用于实现跨文档通信（Cross-document messaging）的方法。它允许在不同窗口或 iframe 之间安全地传递数据。通常情况下，这些窗口或 iframe 可能来自同一域或不同域。
复制链接

扫一扫