postMessage详解
大家好，又见面了，我是你们的朋友全栈君。
目录
一、概述
作用
该方法是HTML5引入的API，可以通过异步方式实现跨源通信，多用于窗口间数据通信。它提供了一种受控机制来规避不同源脚本无法通信的限制，只要正确使用，这种方法很安全。
什么是跨源
同源即指相同的协议、域名或IP、端口号。浏览器具有同源限制，同源脚本可以相互通信，一般非同源（跨源）的脚本文件禁止相互通信。
语法
postMessage详解
message事件
通过绑定window的message事件来监听发送的跨文档消息传输内容。
二、代码示例
示例1
发送程序如下代码所示。
<div>
<input id="text" type="text" value="demo" />
<button id="btn">发送消息</button>
</div>
<iframe
loading="lazy"
id="iframe" 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('iframe').contentWindow;
var btn = document.getElementById('btn');
btn.addEventListener('click', function (e) {
e.preventDefault();
var val = document.getElementById('text').value;
receiver.postMessage("Hello", "https://c.runoob.com");
});
}
</script>接收程序如下代码所示。
<script>
// 监听 message 事件
window.addEventListener('message', function (e) {
if (e.origin !== "https://www.runoob.com") { // 验证消息来源地址
return;
}
console.log("从"+ e.origin +"收到消息： " + e.data);
});
</script>- e.source：消息源，消息的发送窗口/iframe
- e.origin：消息源的URL（可能包含协议、域名或IP、端口），用来验证数据
- e.data：发送过来的数据
示例2：iframe父子页面通信
接收消息的一方需要监听message事件。
window.addEventListener(“message”, ()=> {
});父页面向子页面传递信息。
let ifr = document.getElementById("iframe")
ifr.contentWindow.postMessage('父页面向子页面发送消息', "*")
// or
ifr.contentWindow.postMessage('父页面向子页面发送消息', "http://10.192.195.166:56225/son.html")子页面向父页面传递数据。
window.parent.postMessage('子页面向父页面发送消息','*')发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/159842.html原文链接：https://javaforall.cn
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
