Window postMessage() 方法

最新推荐文章于 2025-03-20 14:25:09 发布

天心天地生

最新推荐文章于 2025-03-20 14:25:09 发布

阅读量540

点赞数 2

原文链接：https://www.runoob.com/js/met-win-postmessage.html

版权

本文详细介绍了JavaScript中的Window.postMessage()方法，用于安全的跨源通信。通过提供otherWindow参数指定接收窗口，message参数传递数据，targetOrigin验证消息来源。示例展示了如何在父页面和iframe之间发送及接收消息，强调了验证消息来源的重要性。同时，文章还提到了e.source和e.origin等关键属性在处理消息事件时的角色。

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

Window postMessage() 方法

定义和用法

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

实例

发送程序

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<div>
    <h1>父页面,用于发送消息</h1>
    <input id="text" type="text" value="666" />
    <button id="sendMessage" >发送消息</button>
</div>
<h1>嵌套的iframe页面,用于接收消息</h1>
<iframe id="receiver" src="./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+"！", "*");
    });
}
</script>
</body>
</html>

尝试一下 »

接收程序：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>嵌套的iframe页面,用于接收消息</title>
</head>

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

</html>