关于window.postMessage实现跨域通讯的理解

    最近需要写一个uni-app项目，使用nvue创建app，嵌入webview引用vue项目，在这个过程中需要实现互相通讯。而由于webview中引入的是vue项目而不是uni-app项目，所以不能支持uni.postMessage方法，需要直接使用window.postMessage方法实现。

    查看官网的说明：

    关于示例中，有一点理解误区，导致后续编写demo时，无法成功发送消息。postMessage的第二个参数targetOrigin是目标源，而不是当前源。也就是说，要给谁发消息，就设置谁的域名。

demo

父页面

<template>
  <div id="app">
    <iframe src="http://daohang.zjh336.cn/demo/index.html"/>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
    }
  },
  methods:{
    sendMessage(){
      console.log('开始发送消息了')
      window.frames[0].postMessage('skipPage2','http://daohang.zjh336.cn')
    }
  },
  mounted () {
    window.addEventListener('message', (event) => {
      console.log("父组件收到的消息为："+JSON.stringify(event.data) +  ',' + event.origin)
    }, false);
  }
}
</script>

子页面

<script>
			//监听消息反馈
			window.addEventListener('message', (event) => {
				console.log("子组件收到消息:"+JSON.stringify(event.data) +  ',' + event.origin)
				event.source.postMessage('回复:123456',event.origin)
			}, false);
</script>

实际效果：