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

最新推荐文章于 2024-08-24 18:58:59 发布

jieyucx

最新推荐文章于 2024-08-24 18:58:59 发布

阅读量6k

点赞数 7

分类专栏： vue的那些事文章标签： vue.js 交互 javascript

本文链接：https://blog.csdn.net/jieyucx/article/details/130368111

版权

vue的那些事专栏收录该内容

54 篇文章 5 订阅

订阅专栏

文章介绍了HTML5的postMessageAPI如何用于Vue应用中父子页面(包含iframe)之间的跨域通信。通过`window.postMessage`方法，可以在不同源的脚本之间传递信息。文中提到了获取iframe窗口对象的方法以及避免跨域报错的注意事项，包括不应将iframe的window对象存储在data对象中和不直接使用`location.reload()`。示例代码展示了Vue组件如何向iframe发送数据，以及iframe如何接收和回传数据给父页面。

摘要由CSDN通过智能技术生成

什么是postMessage

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

vue父页面（嵌入iframe的页面）

在vue中要使用iframe上的postMessage,首先应该获取到iframe实例，有以下几种方式

<iframe :src=“flowSrc” name=“myiframe” ref=“myiframe” id=“myiframe” style=“min-height:800px; width:100%;margin:0;border:0;”> </iframe>
   let iframeWin1 = window.frames["myiframe"];
   let iframeWin2 = this.$refs.myiframe.contentWindow;
   let iframeWin3 = document.getElementById("myiframe").contentWindow;

重点： 将iframe的window窗体存储至data对象中会出现跨域报错
重点： 将iframe的window窗体存储至data对象中会出现跨域报错
重点： 将iframe的window窗体存储至data对象中会出现跨域报错
重要的事情说三遍！！！！
也不要用这个方式刷新iframe
let iframeWin2 = this.$refs.myiframe.contentWindow;
iframeWin2.location.reload()
这样操作也会导致跨域
在这里插入图片描述
在这里踩坑了，明明postMessage是支持跨域通信的，但是我在用的时候还是报跨域了，原因就是上述所说的。

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

<template>
  <div class="home">
    <div class="search-container">
      <el-input placeholder="请输入内容" 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赋值链接
  },
  mounted() {
    // this.passOnIframeData()
  },
  methods: {
    search() {
      this.sendMessage(this.inputValue)
    },
    // 给iframe传递数据
    sendMessage(msg){
        let iframeWin = window.frames["myiframe"];
        //将iframe的window窗体存储至data对象中会出现跨域报错
        iframeWin.postMessage(msg,"*");
    },
   
  }
}
</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>
</body>
<script>
    //监听message事件，采用冒泡传递方式
    window.addEventListener("message",receiveMessage,false);
    function receiveMessage(event){
        let data = event.data
        console.log('我是父页面传递过来的', data)
        document.getElementById("mydiv").innerHTML = data;
    }
</script>
</html>

子页面向父页面传递数据
在子页面中使用parent.postMessage或者window.parent.postMessage向父元页面发送消息

<!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">
       <button onClick="sendMessage">回传数据</button>
    </div>
</body>
<script>
    function sendMessage(data){
        let data = event.data
        console.log('我是父页面传递过来的', data)
        window.parent.postMessage("回传数据----哈哈哈哈", "*")
    }
</script>
</html>

父页面接收子页面的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跨域父页面</title>
</head>
<body>
    <div id="app">
        <iframe name="myiframe" ref="myiframe" id="myiframe" src="http://www.a.com/index.html"></iframe>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: '跨域父页面',
                iframeWin: null, 
            },
            methods: {
                //处理接收的消息
                receiveMessage(event){
                    let data = event.data;
                    console.log('子组件传递过来的数据', data)
                }
            },
            created(){
                window.addEventListener("message",this.receiveMessage,false);
            },
            //vue实例销毁时销毁一些监听事件
            destroyed(){
                window.removeEventListener("message",this.receiveMessage);

            }
        })
    </script>
</body>
</html>