Vue中iframe 結合 window.postMessage 實現跨域通信
一、前言
什麼是iframe
?
iframe
元素會創建包含另外一個文檔的內聯框架(即行內框架)。
什麼是postMessage
?
window.postMessage()
方法可以安全地實現跨源通信。通常,對於兩個不同頁面的腳本,隻有當執行它們的頁面位於具有相同協議(通常為https
),端口號(443
為https
的默認值),以及主機 (兩個頁面的模數 Document.domain
設置為相同值) 時,這兩個腳本才能相互通信。window.postMessage()
方法提供瞭一種受控機制來規避此限制,隻要正確的使用,這種方法就很安全。
二、應用場景
在一個項目的頁面中嵌入另一個項目的頁面,需要實現父子,子父頁面的通信。
2.1 嵌入頁面
iframe
使用如下(端口為8080
):
<iframe id="myframe" name="myframe" :src="src" ref="iframe" scrolling="no" width="350px" height="350px" frameborder="0"></iframe>
在data
中定義src
引入端口號為8081的頁面:
src:"http://127.0.0.1:8081/#/Login",
那麼問題就來瞭,嵌入的登錄模塊屬於子頁面(另一個項目,端口號8081)的東西,如何能讓我自己的頁面知道用戶點擊瞭藍色按鈕,達到登錄後隱藏登錄框的效果呢?在這裡,postMessage
就派上瞭用場。
2.2 postMessage 實現父子頁面通信
window.postMessage
中的window
在iframe
中是指什麼呢?
我們首先要獲取到iframe
的contentWindow
屬性放到mounted
鉤子函數中。
mounted() { this.iframeWin = this.$refs.iframe.contentWindow; },
目標源寫成 *
,具備瞭兩個必要參數,我們就可以開始使用postMessage
瞭。
2.3 子頁面向父頁面傳值
在這個項目中,我需要在點擊login按鈕(子頁面),並且登陸成功後在父頁面中隱藏登錄模塊。
父頁面如何才能知道用戶點擊瞭子頁面按鈕?
postMessage
隻是一個溝通的橋梁。
子頁面說話,父頁面需要聽到。所以我們在父頁面的mounted函數中寫一個監聽。
mounted() { window.addEventListener('message', this.handleMessage); this.iframeWin = this.$refs.iframe.contentWindow; },
下面為完整代碼
子頁面代碼:
submit() { // 向父vue頁面發送信息 window.parent.postMessage({ data: { code:"success", test:"我是子頁面的test!" } }, '*'); } submit() { // 向父vue頁面發送信息 window.parent.postMessage({ data: { code:"success", test:"我是子頁面的test!" } }, '*'); }
父頁面代碼:
<div class="login" v-if="!loginStatus"> <iframe id="myframe" name="myframe" :src="src" ref="iframe" scrolling="no" width="350px" height="350px" frameborder="0"></iframe> </div> methods: { handleMessage (event) { const data = event.data.data if(data.code === "success"){ alert(data.test) } } } mounted() { window.addEventListener('message', this.handleMessage); this.iframeWin = this.$refs.iframe.contentWindow; },
2.4父頁面代碼:
sendMessage () { // 外部vue向iframe內部傳數據 this.iframeWin.postMessage({ cmd: 'success', data: "我是來自父頁面的data!" }, '*')
子頁面監聽同理。
三、拓展閱讀
postMessage的兩種使用方式
到此這篇關於Vue中iframe 結合 window.postMessage 實現跨域通信的文章就介紹到這瞭,更多相關vue iframe 跨域通信內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- Vue 使用postMessage 實現父子跨域通信
- vue內嵌iframe跨域通信的實例代碼
- vue組件和iframe頁面的相互傳參問題及解決
- 與iframe進行跨域交互的解決方案(推薦)
- 詳解如何讓頁面與 iframe 進行通信