Vue 进阶（七十九）：应用 postMessage 实现父子跨域通信

关注

发布于: 3 小时前

一、跨域通信

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>

复制代码

发布于: 3 小时前阅读数: 2

原文链接:【http://xie.infoq.cn/article/95d04a1dcdb81e0159e7517cb】。文章转载请联系作者。

华强

关注

No Silver Bullet 2021.07.09 加入

岂曰无衣与子同袍

发布

暂无评论

创作场景

Vue 进阶（七十九）：应用 postMessage 实现父子跨域通信

一、跨域通信

二、示例

华强

评论