Vue进阶（七十九）：应用 postMessage 实现父子跨域通信_vue通过按钮事件window

最新推荐文章于 2024-05-30 14:06:01 发布

2401_84617246

最新推荐文章于 2024-05-30 14:06:01 发布

阅读量397

点赞数 3

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84617246/article/details/138959629

版权

程序员专栏收录该内容

105 篇文章 0 订阅

订阅专栏

ajax

1)ajax请求的原理/ 手写一个ajax请求？
2)readyState？
3)ajax异步与同步的区别？
4)ajax传递中文用什么方法？

前12.PNG

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

// 页面销毁前，务必去除监听器，否则会造成资源泄露！
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>

ajax

1)ajax请求的原理/ 手写一个ajax请求？
2)readyState？
3)ajax异步与同步的区别？
4)ajax传递中文用什么方法？

前12.PNG

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

OPTd4m-1715839982273)]

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

2401_84617246

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
Vue进阶（七十九）：应用 postMessage 实现父子跨域通信_vue通过按钮事件window

1)ajax请求的原理/ 手写一个ajax请求？1)ajax请求的原理/ 手写一个ajax请求？4)ajax传递中文用什么方法？4)ajax传递中文用什么方法？3)ajax异步与同步的区别？3)ajax异步与同步的区别？
复制链接

扫一扫