文章目录
-
- 基本概念
- 代码案例
基本概念
跨文档消息，有时候也简称为
XDM(cross-document messaging)
- 是一种在不同执行上下文（如不同源的页面）间传递信息的能力。
- 例如：
www.wrox.com上的页面想要与包含在内嵌窗格中的p2p.wrox.com上面的页面通信XMD的核心就是postMessage()方法
-
postMessage()方法：将message传递给指定窗口 -
postMessage(data,origin)方法接受两个参数：
let iframeWindow = document.getElementById('myframe').contentWindow;
iframeWindow.postMessage('aaa', 'http://www.wrox.com');
1. data:
- 要传输的数据，推荐使用字符串格式，其他格式的浏览器的兼容性不好
- 如果要传输结构化数据，可以通过JSON.stringify处理，接收时用JSON.parse转换回来
2. origin:
- 指明目标窗口的源，协议+主机+端口号[+URL]，URL会被忽略，所以可以不写
- 如果不想限制接收目标源：可以传 '*'
- 如果目标与当前窗口同源：可以传 '/'
- 接收消息
window.addEventListener('message',(event)=>{
// 判断源路径是否来自预期发生者
if(event.origin.includes('http://www.wrox.com')){
// 获取传过来的数据
console.log(event.data)
// 再传回去一条消息
event.source.postMessage('已收到消息', 'p2p.wrox.com')
}
})
// event包含3个参数
- event.data: 接收到的数据
- event.origin: 发送消息的文档源
- event.source: 发生消息的文档中window对象的代理
代码案例
- 目录结构：
- 父页面（
main.html）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>主页面</h1>
<iframe id="child" src="./child.html"></iframe>
<div>
<h2>主页面跨域接收消息区域</h2>
<div id="message"></div>
</div>
</body>
<script>
/* -------------iframe跨域数据传递--------------- */
//传递数据到子页面
window.onload = function() {
document.getElementById('child').contentWindow.postMessage("主页面消息", "/")
}
//接受子页面传递过来的数据
window.addEventListener('message', function(event) {
document.getElementById('message').innerHTML = "收到" + event.origin + "消息：" + event.data;
}, false);
</script>
</html>
- 子页面（
child.html）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>子页面: </h1>
<div>
<div id="message"></div>
</div>
</body>
<script>
//接收父页面传过来的数据
window.addEventListener('message', function(event) {
// 因此判断接收的消息源是否是父页面
if (event.origin.includes("http://127.0.0.1:8848")) {
console.log(event);
document.getElementById('message').innerHTML = "收到" + event.origin + "消息：" + event.data;
//把数据传递给父页面 > top.postMessage(要传递的数据,父页面的url访问地址)
window.top.postMessage("子页面消息收到", 'http://127.0.0.1:8848');
}
}, false);
</script>
</html>
- 运行结果：
