【vue】【JavaScript 】iframe父子传参方法

1、html代码

<iframe ref="iframeRef" id="iframeId" src="YOU_CHILD_PAGE" width="100%" height="300px"></iframe>

2、父页面给子页面、子页面给父页面发送消息方法

/**
 * iframe 父子相互传参方法
 *
 * @param msg 可传入数字、对象、字符串等，方法内将其转化成字符串
 * @param type 1：父 => 子、2：子 => 父
 * @param iframeEle 当type为1时需要，获取方式：
 * document.getElementById("iframeId")或document.getElementById(this.$refs.iframeRef)
 */
function pushMessage(msg, type, iframeEle) {
  if (type === 1) {
    // 父 => 子
    iframeEle.contentWindow.postMessage(JSON.stringify(msg), "*");
  } else if (type === 2) {
    // 子 => 父
    window.parent.postMessage(JSON.stringify(msg), "*");
  }
}

备注：msg可以传入字符串、数组、对象或数组对象等格式参数，依据自身的业务需求来定。

3、绑定事件监听

// 接收iframe推送过来的数据（无论父子级）
window.addEventListener('message', YOU_RECEIVE_FUNCTION, false)

1）addEventListener三个参数介绍：

第一个参数event：监听的事件名称

第二个参数是函数：需要执行的事件

第三个参数是useCapture（变量）：用来判断是捕获还是冒泡

2）第三个参数是useCapture（默认为false）

• true，在捕获阶段触发事件 (顺序是由父到子)
• false，在冒泡阶段触发事件(顺序是由子到父)
• once：只执行一次。
• passive：承诺此事件监听不会调用 preventDefault，这有助于性能。
• useCapture：是否捕获（否则冒泡）。