Vue 应用 postMessage 实现父子跨域通信
【摘要】 一、跨域通信1.子向父通信parent.html// 页面销毁前，务必去除监听器，否则会造成资源泄露！beforeDestory () { window.removeEventListener('message', this.listenerFun)}mounted() { window.addEventListener('message',this.listenerFun)}method...
一、跨域通信
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'){
// 业务处理逻辑
}
}
}
child.html
window.parent.postMessage({ msg:"xxx"},'*');
2.父向子通信
parent.html
var myframe = document.getElementById('myframe') //获取iframe
myframe.contentWindow.postMessage({data:'parent'}, childDomain);//childDomain是子页面的源（协议+主机+端口号）
child.html
window.addEventListener('message', function(e){
console.log(e.data.data);
})
注意：
- 子向父，子
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>
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>
三、拓展阅读
【版权声明】本文为华为云社区用户原创内容，未经允许不得转载，如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）