vue iframe结合window.postMessage实现跨域通信

因需要要将多个vue项目整合到一个项目，所以首先想到了iframe嵌入的方式，所以在此使用postmessage

父页面往子页面传递数据

父页面

<iframe ref="asas" @load="sendMessage" src="url" style="height: 100%;width:100%;"></iframe>

1、我们首先要获取到iframe的contentWindow属性放到mounted这个钩子函数中。

mounted() {this.iframeWin = this.$refs.asas.contentWindow;}

2、// 外部vue向iframe内部传数据

methods:{
 sendMessage () { this.iframeWin.postMessage({ code:'success', test:'我是数据' }, '*') }
}

子页面

mounted() {window.addEventListener('message', this.handleMessage);}
methods: {
 handleMessage (event) { const data = event.data if(data.code === "success"){ console.log(data.test) } },
}

 

子页面往父页面传递数据

子页面

window.parent.postMessage({ code:"success", test:"我是子页面的test！" }, '*');//可以写在任何地方

父页面

<iframe ref="asas" src="url" style="height: 100%;width:100%;"></iframe>
mounted() {window.addEventListener('message', this.handleMessage);this.iframeWin = this.$refs.asas.contentWindow;}

methods: {handleMessage (event) { const data = event.data if(data.code === "success"){ console.log(data.test) } },}

贼完美

如果不是使用iframe

 

代码举例

发送信息：

//弹出一个新窗口
var domain = 'http://haorooms.com';
var myPopup = window.open(domain 
            + '/windowPostMessageListener.html','myWindow');

//周期性的发送消息
setTimeout(function(){
    //var message = '当前时间是 ' + (new Date().getTime()); 
        var message = {name:"站点",sex:"男"}; //你在这里也可以传递一些数据，obj等
    console.log('传递的数据是  ' + message);
    myPopup.postMessage(message,domain);
},1000);

要延迟一下，我们一般用计时器setTimeout延迟再发用。

接受的页面

//监听消息反馈
window.addEventListener('message',function(event) {
    if(event.origin !== 'http://haorooms.com') return; //这个判断一下是不是我这个域名跳转过来的
    console.log('received response:  ',event.data);
},false);