vue页面内嵌iframe使用postMessage进行数据交互（postMessage跨域通信）

本文链接：https://blog.youkuaiyun.com/nullsheep/article/details/136317251

本文介绍了如何在Vue应用中使用HTML5的postMessageAPI进行跨域通信，展示了如何从父页面向子页面（嵌入的iframe）传递数据以及子页面如何接收并显示父页面传递的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

postMessage是html5引入的API,它允许来自不同源的脚本采用异步方式进行有效的通信,可以实现跨文本文档,多窗口,跨域消息传递.多用于窗口间数据通信,这也使它成为跨域通信的一种有效的解决方案

父页面传递数据给子页面（vue->iframe）

<template>
  <div class="home">
    <div class="search-container">
      <el-input v-model="inputValue" clearable class="mind-input">
      </el-input>
      <div class="search-btn">

        <el-button type="primary" @click="search">搜索</el-button>
      </div>
    </div>
    <div class="ifarm-container">
      <iframe :src="flowSrc" name="myiframe" ref="myiframe" id="myiframe" style="min-height:800px; 	 width:100%;margin:0;border:0;"> </iframe>
    </div>

  </div>
</template>

<script>


export default {
  name: 'HomeView',
  data() {
    return {
      inputValue: '',
      flowSrc: null,
    }
  },
  created() {
    this.flowSrc = 'http://localhost/login';  //直接给flowSrc赋值链接
    window.addEventListener("message",this.receiveMessage,false);
  },
  mounted() {
    // this.passOnIframeData()
  },
  methods: {
    search() {
      this.sendMessage(this.inputValue)
    },
    // 给iframe传递数据
    sendMessage(msg){
        let iframeWin = window.frames["myiframe"];
        //将iframe的window窗体存储至data对象中会出现跨域报错
        iframeWin.postMessage(msg,"*");
    },
    //处理接收的消息
     receiveMessage(event){
      		let data = event.data;
     	 	console.log('子组件传递过来的数据', data)
     }

   
  },
  destroyed(){
   window.removeEventListener("message",this.receiveMessage);
    }
}
</script>
<style lang="less" scoped>
.home {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .search-container {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .mind-input {
      width: 500px;
    }

    .search-btn {
      flex: 1;
      margin-left: 20px;
    }
  }

  .ifarm-container {
    width: 98%;
    min-height: 800px;
    margin-top: 20px;
    border: 1px solid rgb(175, 171, 171);
  }
}
</style>

子页面接收父页面数据（iframe接收vue传递过来的数据）父子（中间不能隔着弹窗）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iframe跨域子页面</title>
</head>
<body>
    <div id="mydiv">
        vue、iframe、postMessage跨域子页面
    </div>
    <div id="mydiv1">
       <button onClick="sendMessage">回传数据</button>
    </div>
</body>
<script>
    //监听message事件，采用冒泡传递方式
    window.addEventListener("message",receiveMessage,false);
    function receiveMessage(event){
        let data = event.data
        console.log('我是父页面传递过来的', data)
        document.getElementById("mydiv").innerHTML = data;
    }；
     function sendMessage(data){
        let data = event.data
        console.log('我是父页面传递过来的', data)
        //往父类传送消息 无差别传送  只要父类 及祖父类 接收信息 就能收到
        window.parent.postMessage("回传数据----哈哈哈哈", "*")
    }
</script>
</html>