vue组件与iframe内嵌html通信的js方法

使用vue框架有时会嵌入封装好的第三方组件，尤其是用原生js和jquery开发的组件。那么vue组件该如何与iframe嵌入页面进行通信呢？方法如下：

（1）在vue组件中通过iframe引入我们需要的插件，如：

<iframe :src="iframeSrc" id="iframeDate" name="iframeDate" scrolling="no" style="width:100%;height:440px;" frameborder="0"></iframe>

注：iframeSrc 为插件地址，通常放在public文件中（最要使用相对路径）

（2）在vue的mounted生命周期注册通信事件，如：

 mounted() {
    window.addEventListener("message", this.handleIframeMessage);
},

注：this.handleIframeMessage 为 接受iframe返回参数的方法,定义在methods中，如：

methods: {
        handleIframeMessage(e) { 
            // 获取参数    
        },
}

(3）在vue的beforeDestroy生命周期移除事件，如：

beforeDestroy() {
    window.removeEventListener("message", this.handleIframeMessage);
},

（4）在iframe嵌入页面里传值给父级vue，如：

 // 传值给父级vue
 window.parent.postMessage({stopTime},'*');

注：stopTime为要传值的变量，在vue里通过handleIframeMessage方法接收。