通讯

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

语法

js 复制代码

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

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

js 复制代码

<div>
    <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>

js 复制代码

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

共 0 条

后参与评论

目录

iframe相关知识

通讯

语法

评论