记录下关于在vue中iframe的使用（学习笔记)

近期项目需要把本身一些能力页面，嵌套到其它业务项目中，需要用到iframe标签来跨域嵌套页面，传递信息。 在此记录下使用：

<iframe/>是HTML内联框架元素标签，简单来说，标签用于在网页里面嵌入其他网页。

<template>
  <div>
    <iframe
      id='frame'
      src="https://example.com" 
      ref='frame'
      width="400"
      height="300">
    </iframe>
  </div>
</template>

向子页面发送消息

    sendMessage() {
          // 获取子页面窗口
      let send = document.getElementById('frame').contentWindow 
          // 向子页面发送消息 
      send.postMessage('message', '*')
    },

向父页面发送消息

    sendMessageToParent() {
          // 向子页面发送消息 
      window.parent.postMessage('message', '*')
    },

监听数据

mounted() {
 //第一个参数是自定义事件名称，
 // 第二个参数是事件触发后调用的函数
//默认值为 false, 即冒泡传递，当值为true时, 事件使用捕获传递。
  window.addEventListener('message', this.receiveMsg, false);
},
methods：{
    receiveMsg(msg){
    //获取接收到的信息msg
    //下一步
    }

}

销毁监听事件

beforeDestroy() {
  window.removeEventListener('message', this.receiveMsg, false)
},