Vue进阶（七十九）：使用postMessage来实现父子通信跨域
【摘要】 1.子向父通信 parent.html
// 页面销毁前，务必去除监听器，否则会造成资源泄露！
beforeDestory () {
window.removeEventListener('message', this.listenerFun)
}
mounted() {
window.addEventListener('message',this.listen...
1.子向父通信
parent.html
// 页面销毁前，务必去除监听器，否则会造成资源泄露！
beforeDestory () {
window.removeEventListener('message', this.listenerFun)
}
mounted() {
window.addEventListener('message',this.listenerFun)
}
methods: {
listenerFun (e) {
console.log(e.data); if(e.data.msg==='xxx'){ // 业务处理逻辑 }
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
child.html
window.parent.postMessage({ msg:"xxx"},'*');
- 1
2.父向子通信
parent.html
var myframe = document.getElementById('myframe') //获取iframe
myframe.contentWindow.postMessage({data:'parent'},childDomain);//childDomain是子页面的源（协议+主机+端口号）
- 1
- 2
- 3
child.html
window.addEventListener('message', function(e){ console.log(e.data.data);
})
- 1
- 2
- 3
注意：
- 子向父，子postMessage,父监听message;
- 父向子，父postMessage,子监听message;
- 测试发现，子向父postMessage的时候，源可以写为‘*’，父向子postMessage的时候，源需要写成子的源，(也就是子页面的协议+主机号+端口)
测试代码部分：
parent.html
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <title>iframe父级页面</title> <style> * { padding: 0; margin: 0; } iframe { width: 200px; height: 200px; } </style>
</head>
<body> <h2>我是父级页面</h2> <button id='btn'>父页面的按钮</button> <div id="default">div内容</div> <iframe src="http://localhost:8800/child.html" frameborder="0" name='myframe' id='myframe'></iframe> <script language="javascript" type="text/javascript"> window.addEventListener('message',function(e){ console.log(e.data); if(e.data.msg==='hideselfService'){ document.getElementById('default').style.display = 'none'; } }); document.getElementById('btn').onclick= function(){ var myframe = document.getElementById('myframe'); myframe.contentWindow.postMessage({data:'parent'},'http://localhost:8800'); } </script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
child.html
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <title>iframe子页面</title>
</head>
<body> <h2>我是内嵌的子页面</h2> <button id='btn'>子页面的按钮</button> <script> document.getElementById('btn').onclick= function(){ window.parent.postMessage({ msg:"hideselfService" },'*'); } window.addEventListener('message', function(e){ console.log(e.data.data); }) </script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
tips:测试后的时候，我是分别用node起了两个服务，父页面在localhost:8000上，子页面在localhost:8800上
文章来源: shq5785.blog.csdn.net，作者：No Silver Bullet，版权归原作者所有，如需转载，请联系作者。
原文链接：shq5785.blog.csdn.net/article/details/101063108
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）