vue与iframe页面通讯

业务场景

vue通过iframe嵌入外部html，使用postMessage来作为vue页面与iframe页面通讯。

vue示例：

<template>
  <div>
    <iframe
	id="iframeId"
	ref="iframe"
	:src="iframUrl"
	frameborder="0"
	class="iframe"
	scrolling="auto"
	>
    </iframe>
    <button @click="test">test</button>
  </div>
</template>

<script>
export default {
    data(){
        return {
            iframUrl:'http://localhost:8090/',//iframe外部链接
            iframeWin:{},
        }
    },
    components: {},
    methods:{
        //vue与iframe交互通讯
        sendMessage (str,data,key) { 
            // 外部vue向iframe内部传数据
            this.iframeWin.postMessage({
                cmd: str,
                data: data,
                key:key
            }, '*')
        },
        handleMessage (event) {
            // 根据上面制定的结构来解析 iframe 内部发回来的数据
            const data = event.data
            switch (data.cmd) {
			
            }
        },
	test(){
            this.sendMessage('reset');
        },
    },
    computed:{

    },
    watch:{

    },
    mounted(){
        //获取iframe信息
        this.iframeWin = this.$refs.iframe.contentWindow;
        this.$nextTick(() => {
            // 在外部 Vue 的 window 上添加 postMessage 的监听，并且绑定处理函数 handleMessage
            window.addEventListener('message', this.handleMessage)
        });
    },
    destroyed () {
        // 注意移除监听！注意移除监听！注意移除监听！
        window.removeEventListener('message', this.handleMessage);
        
    }
}
</script>

iframe示例：

<script type="text/javascript">
//向父页面发送信息
function postMessage(type,data){
    window.parent.postMessage({
        cmd: type,
        data: data
    }, '*')
}
// 接受父页面发来的信息
window.addEventListener("message", function (event) {
    var obj = event.data;
    switch (obj.cmd) {
        //初始化
        case 'reset':
            console.log('初始化')
        break;
        
    }
});
</script>