postMessage使用
参考自文档：https://www.runoob.com/js/met-win-postmessage.html
postMessage 方法用于安全地实现跨域通信。
涉及到通信，则会有信息发送方 和 信息接收方。
发送方，调用 postMessage 方法，发送 message ，接收方，在 window 下监听 message 方法，接受传来的数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>postMessage</title>
</head>
<body>
<div>
<input id="text" type="text" value="Runoob" />
<button id="sendMessage1">发送消息1</button>
<button id="sendMessage2">发送消息2</button>
</div>
<iframe
loading="lazy"
id="receiver"
src="./postmessageget.html"
width="300"
height="360"
>
<p>你的浏览器不支持 iframe。</p>
</iframe>
<script>
// message 发送：postmessage方法调用者：谁需要数据，谁调用
// message 接收：window下监听 message 事件
window.onload = function () {
let val = document.getElementById("text").value;
// 发送消息1 iframe
let receiver = document.getElementById("receiver").contentWindow; // 得到就是 iframe 的 window 对象
let btn1 = document.getElementById("sendMessage1");
btn1.addEventListener("click", function (e) {
e.preventDefault();
// postmessage.html:33 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://c.runoob.com') does not match the recipient window's origin ('http://127.0.0.1:5500').
// receiver.postMessage("Hello " + val + "！", "https://c.runoob.com"); // 限制 targetOrgin 之后，如果该 iframe src不为指定域名，则无法发送 数据
receiver.postMessage("Hello " + val + "111", "*"); // * 可以发送成功
});
// 发送消息2 window.open ，会同时打开 postmessageget 网页
let otherWindow = window.open("./postmessageget.html");
let btn2 = document.getElementById("sendMessage2");
btn2.addEventListener("click", function (e) {
e.preventDefault();
otherWindow.postMessage("Hello " + val + "222", "*"); // * 可以发送成功
});
};
window.addEventListener("message", function (e) {
console.log("父页面收到：", e.data);
});
</script>
</body>
</html>postmessage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>window.postMessage() 跨域消息传递测试</title>
</head>
<body>
<div id="recMessage">Hello World!</div>
<script>
window.onload = function () {
var messageEle = document.getElementById("recMessage");
window.addEventListener("message", function (e) {
console.log("e", e);
messageEle.innerHTML =
"从" + e.origin + "收到消息： " + JSON.stringify(e.data);
console.log("子页面收到：", e.data);
let top = window.top;
top.postMessage("子页面说你好");
});
};
</script>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022-06-29，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读