Window postMessage() 方法

Window 对象参考手册 Window 对象

定义和用法

postMessage() 方法用于安全地实现跨源通信。

语法

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

参数 说明
otherWindow 其他窗口的一个引用，比如 iframe 的 contentWindow 属性、执行 window.open 返回的窗口对象、或者是命名过或数值索引的 window.frames。
message 将要发送到其他 window的数据。
targetOrigin 指定哪些窗口能接收到消息事件，其值可以是 *（表示无限制）或者一个 URI。
transfer 可选，是一串和 message 同时传递的 Transferable 对象。这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

浏览器支持

Chrome 1 Edge 12 Firefox 8 Safari 4 Opera 9.5

实例

发送程序

<div> <input id="text" type="text" value="Runoob" /> <button id="sendMessage" >发送消息</button> </div> <iframe loading="lazy" id="receiver" src="https://c.runoob.com/runoobtest/postMessage_receiver.html" width="300" height="360"> <p>你的浏览器不支持 iframe。</p> </iframe> <script> window.onload = function() { var receiver = document.getElementById('receiver').contentWindow; var btn = document.getElementById('sendMessage'); btn.addEventListener('click', function (e) { e.preventDefault(); var val = document.getElementById('text').value; receiver.postMessage("Hello "+val+"！", "https://c.runoob.com"); }); } </script>

尝试一下 »

接收程序：https://c.runoob.com/runoobtest/postMessage_receiver.html

接收程序有一个事件监听器，监听 "message" 事件，同时我们要验证消息来源地址，以确保是个可信的发送地址。

<div id="recMessage"> Hello World! </div> <script> window.onload = function() { var messageEle = document.getElementById('recMessage'); window.addEventListener('message', function (e) { // 监听 message 事件 alert(e.origin); if (e.origin !== "https://www.runoob.com") { // 验证消息来源地址 return; } messageEle.innerHTML = "从"+ e.origin +"收到消息： " + e.data; }); } </script>

尝试一下 »
  • e.source – 消息源，消息的发送窗口/iframe。
  • e.origin – 消息源的 URI(可能包含协议、域名和端口)，用来验证数据源。
  • e.data – 发送过来的数据。
Window 对象 参考手册 Window 对象