otherWindow 其他窗口的一个引用,比如 iframe 的 contentWindow 属性、执行 window.open 返回的窗口对象、或者是命名过或数值索引的 window.frames。 message 将要发送到其他 window的数据。 targetOrigin 指定哪些窗口能接收到消息事件,其值可以是 * (表示无限制)或者一个 URI。 < input id = " text " type = " text " value = " Runoob " /> < button id = " sendMessage " > 发送消息 </ button > </ div > < iframe 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 对象