简介
postMessage用于安全的实现跨源通讯，语法如下：
otherWindow.postMessage(message, targetOrigin, [transfer]);
otherWindow : 其他窗口的一个引用，比如 iframe 的 contentWindow 属性、执行 window.open 返回的窗口对象、或者是命名过或数值索引的 window.frames。
message: 将要发送到其他 window的数据。
targetOrigin: 指定哪些窗口能接收到消息事件，其值可以是 *（表示无限制）或者一个 URI。
transfer: 可选，是一串和 message 同时传递的 Transferable 对象。这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。
使用案例
案例1，iframe接收
父页面发送，iframe子页面接收。
- demo1/send.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div>
<input id="text" type="text" value="data" />
<button id="sendMessage" >发送消息1</button>
</div>
<iframe id="receiver" src="/demo1/receiver.html" width="300" height="360">
<p>你的浏览器不支持 iframe1。</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+"！", "http://localhost:5555/");
});
}
</script>
</body>
</html>
- demo1/receiver.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>window.postMessage() 跨域消息传递测试</title>
</head>
<body>
<div id="recMessage">
Hello World!1
</div>
<script>
window.onload = function() {
var messageEle = document.getElementById('recMessage');
window.addEventListener('message', function (e) {
messageEle.innerHTML = "源头："+ e.origin +"<br>收到消息： " + e.data;
});
}
</script>
</body>
</html>
demo2 页面内发送接收
- demo2/send.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div>
<input id="text" type="text" value="data" />
<button id="sendMessage">发送消息1</button>
</div>
<hr>
<div id="recMessage">
Hello World!1
</div>
<script>
window.onload = function () {
// 1.发送代码
// var receiver = document.getElementById('receiver').contentWindow;
var btn = document.getElementById('sendMessage');
btn.addEventListener('click', function (e) {
e.preventDefault();
var val = document.getElementById('text').value;
window.postMessage("Hello " + val + "！", "http://localhost:5555/");
});
// 2.接收代码
var messageEle = document.getElementById('recMessage');
window.addEventListener('message', function (e) {
messageEle.innerHTML = "源头：" + e.origin + "<br>收到消息： " + e.data;
});
}
</script>
</body>
</html>
demo3多个接收方
- demo3/send.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div>
<input style="width: 500px;" id="text" type="text" value='{"cmd":"abc","time":"20230107120000","data":{"videoId":12,"name":"宣传视频"}}' ></input>
<button id="sendMessage">发送消息1</button>
</div>
<hr>
<div id="recMessage1">
Hello World!1
</div>
<div id="recMessage2">
Hello World!1
</div>
<script>
window.onload = function () {
// 1.发送代码
var btn = document.getElementById('sendMessage');
btn.addEventListener('click', function (e) {
e.preventDefault();
var val = document.getElementById('text').value;
window.postMessage( val, "/");
});
// 2.接收代码,2个接收端
var messageEle1 = document.getElementById('recMessage1');
window.addEventListener('message', function (e) {
console.log("wwwww")
messageEle1.innerHTML = "源头：" + e.origin + "<br>收到消息： " + e.data;
});
var messageEle2 = document.getElementById('recMessage2');
window.addEventListener('message', function (e) {
console.log("wwwww")
messageEle2.innerHTML = "源头：" + e.origin + "<br>收到消息： " + e.data;
});
}
</script>
</body>
</html>
测试发现2个接收函数都能够同时接收到消息。
网友评论