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

原创  郑建华   2021-03-19   46人阅读  0 条评论

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

image.png

    查看官网的说明:

image.png


image.png

image.png

    关于示例中,有一点理解误区,导致后续编写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>

实际效果:

image.png

    

本文地址:https://www.zjh336.cn/?id=2026
版权声明:本文为原创文章,版权归 郑建华 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?