前端postMessage跨域通讯

首先我们需要两个服务地址
这里我直接创建两个vue项目

然后因为不需要太多的逻辑 我这边直接就都把代码写在App.vue里了

启动项目之后 终端会输出项目的访问地址

然后我们在 项目1 的App.vue中编写代码如下

<template>
  <div id="app">
    项目1
    <input type="text"  v-model="name" @input = "oninput"/>
    <div>
       <iframe ref = "view" src = "项目二的访问路径">iframe>
    div>
  div>
template>

<script>
export default {
  data() {
    return {
      name: ""
    }
  },
  methods:{
    oninput() {
      console.log(this.name)
    }
  },
};
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

项目2 的App.vue参考代码如下

<template>
  <div id = "app">
    项目2
    <input type="text"  v-model="name" @input = "oninput"/>
  div>
template>

<script>

export default {
  name: 'App',
    data() {
    return {
      name: ""
    }
  },
  methods:{
    oninput() {
      console.log(this.name);
    }
  },
}
script>

<style>
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

然后我们的界面就会变成这样

然后我们在 项目1的输入中输入内容 控制台会输出内容 那么问题是 我们怎么把这个信息给到项目2呢？

我们改写项目1 的 App.vue中的 oninput方法 参考代码如下

oninput() {
  this.$refs.view.contentWindow.postMessage(this.name, '项目二的访问路径');
}
1
2
3

然后我们给项目2的App.vue上 写上mounted生命周期 其中代码参考如下

mounted(){
  window.addEventListener('message',(e) => {
    console.log("项目1",e.data);
  })
},
1
2
3
4
5

此时 我们在 项目1中输入内容 项目2的message就可以监听得到

然后子向父传值可以直接在子页面中调用

parent.postMessage("要传的值", '*')
1

父页面也写一个 message 接收子级传来的数据就好了

mounted(){
  window.addEventListener('message',(e) => {
    console.log("项目1",e.data);
  })
},
1
2
3
4
5

如果你不想用iframe

let view = window.open("访问地址");
view.contentWindow.postMessage('需要传的值', '项目地址');
1
2

这样也是可以的
但前提是两个项目绝对不能有任何嵌套关系 不然有问题的