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);