vue項目中iframe嵌套其他項目，iframe父子頁面傳值

場景：vue后台管理系統項目嵌入其他項目

一、iframe引入其他項目地址

<iframe 
　　ref="newScreen" 
　　@load="sendMessage" 
　　frameborder="0" 
　　:src="url" 
　　width="100%" 
　　height="100%" 
　　id="ysOpenDevice" 
　　allowfullscreen>
</iframe>

二、父頁面向子頁面傳值

由於某些功能需要鑒權，故在原系統登錄后獲取token傳給子頁面

父頁面綁定onload事件

mounted() {
        let ts = new Date().getTime()
        this.url = 'http://localhost:8090/#/home/xxxx?_'+ts
　　　　 this.iframeWin = this.$refs.newScreen.contentWindow;
    },

方法定義：

sendMessage() {
            this.iframeWin.postMessage({ token: localStorage.getItem('access_token') }, '*')
        },

子頁面接收：

created() {
        window.addEventListener('message', this.handleMessage)
    },
methods: {
    handleMessage (event) { 
            const {token} = event.data 
            console.log('token',token) 
        },
}

三、子頁面向父頁面傳值

由於嵌入的項目需要與原項目交互，跳轉到對應菜單，故需傳值給父頁面

子頁面傳值方法

let data = {
        xxx: '',
        yyy: '',
        zzz: { }
    }
window.parent.postMessage(data, '*')

父頁面接收

 mounted() {
        window.addEventListener('message', this.handleMessage)
    },
    methods: {
        handleMessage(event) {
            const { xxx, yyy, zzz} = event.data
        },
    }

四、說明

1.  iframe緩存：在iframe指向的頁面地址后綴添加一個時間戳。確保每次加載時，讓瀏覽器知道它是最新的頁面，避免緩存
2. 頁面卸載前注銷監聽事件

注意：當使用webpack時，webpack自身會發送postMessage，注意監聽message時區分具體是自己發來的message還是webpackOK