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
)
{
尝试一下 »
e.source
– 消息源,消息的发送窗口/iframe。
e.origin
– 消息源的 URI(可能包含协议、域名和端口),用来验证数据源。
e.data
– 发送过来的数据。
Window 对象