Vue iframe父子通信

Aibac

已于 2022-03-09 14:16:42 修改

阅读量606

点赞数

分类专栏：前端文章标签： vue.js javascript 前端

于 2022-03-09 14:15:18 首次发布

本文链接：https://blog.csdn.net/u013355529/article/details/123373607

版权

前端专栏收录该内容

10 篇文章 1 订阅

订阅专栏

vue 组件嵌入iframe

<!-- vue template-->
<div>
  <iframe src="http://localhost:8081/" ref="iframe" frameborder="0"></iframe>
</div>

mounted() {
  window.addEventListener("message", (e:  any) => {
      const data = e.data;
      console.log(data);  // 输出iframe 消息
      const child = (this.$refs['iframe'] as any);
      child.contentWindow.postMessage('success', '*')  // '*'参数表示没有跨域限制
    }, false);
}

iframe里的vue页面发送消息与接收消息

mounted() {
	// 发送消息
    window.parent.postMessage({
      str: 'hello'
    }, '*'); // '*'参数表示没有跨域限制
    // 接受消息
    window.addEventListener('message', (event: any) => {
      console.log(event.data)
    })
 }