window.postMessage()实现往iframe页面里面发送消息

#麻辣小龙虾#

已于 2023-04-17 18:36:09 修改

阅读量6.9k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： javascript

于 2019-07-01 17:53:25 首次发布

本文链接：https://blog.youkuaiyun.com/CodingNoob/article/details/94400704

web前端专栏收录该内容

99 篇文章

订阅专栏

本文介绍如何使用window.postMessage()方法实现跨域安全通信，详细解释了其基本语法及参数，包括targetWindow、message、targetOrigin和transfer。并通过示例展示了发送与接收消息的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

window.postMessage()方法可以安全地实现Window对象之间的跨域通信。例如，在一个页面和它生成的弹出窗口之间，或者是页面和嵌入其中的iframe之间。

通常情况下，不同页面上的脚本允许彼此访问，当且仅当它们源自的页面共享相同的协议，端口号和主机（也称为“同源策略”）。window.postMessage()提供了一个受控的机制来安全地规避这个限制（如果使用得当的话）。

一般来说，一个窗口可以获得对另一个窗口的引用(例如，通过targetWindow=window.opener)，然后使用targetWindow.postMessage()在其上派发MessageEvent。接收窗口随后可根据需要自行处理此事件。传递给window.postMessage()的参数通过事件对象暴露给接收窗口。

发送消息的基本语法：

targetWindow.postMessage(message, targetOrigin, [transfer]);

targetWindow

targetWindow就是接收消息的窗口的引用。获得该引用的方法包括：

Window.open
Window.opener
HTMLIFrameElement.contentWindow
Window.parent
Window.frames +索引值

message

message就是要发送到目标窗口的消息。数据使用结构化克隆算法进行序列化。这意味着我们可以将各种各样的数据对象安全地传递到目标窗口，而无需自己对其进行序列化。

targetOrigin

targetOrigin就是指定目标窗口的来源，必须与消息发送目标相一致，可以是字符串“*”或URI。 *表示任何目标窗口都可接收，为安全起见，请一定要明确提定接收方的URI。

transfer

transfer是可选参数

event对象有三个属性，分别是origin，data和source。event.data表示接收到的消息；event.origin表示postMessage的发送来源，包括协议，域名和端口；event.source表示发送消息的窗口对象的引用; 我们可以用这个引用来建立两个不同来源的窗口之间的双向通信。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>发送消息页面</title>
</head>
<body>
 <iframe src="./receive.html" id="receiver" width="600" height="500"></iframe>
 <button id="btn">发送消息</button> 
</body>
<script>
  document.querySelector('#btn').onclick = function () {
    document.getElementById('receiver').contentWindow.postMessage("Hello!", "http://localhost:9999");
    alert('我发送信息给子窗口了！');
  }
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>接受消息页面</title>
</head>
<body>
  <h1>我是接受参数的页面</h1>
</body>
<script>
  window.onload = function () {
    var NUM = 0;
    window.addEventListener('message', function (e) {
      console.log(e);
      let h1 = document.createElement('h1');
      h1.innerHTML = '第' + (NUM++) + '条信息，' + e.data;
      document.body.appendChild(h1);
    });
  }
</script>
</html>

运行结果：