Iframe内嵌

一 嵌入方

1.1. 嵌入方式

<template>
  <div class="iframe-container">
     <iframe id="iframePage" ref="iframePage" class="sys-frame" src=""></iframe>
  </div>
</template>

1.2. 接收消息

window.addEventListener("message", receiveMessage, false);

function receiveMessage (event) {
  let data = event.data;
  console.log(data)
}

二 被嵌入方

2.1.发送消息

// 发送postMessage
let iframe = this.$refs.iframePage;
iframe.src = '****';
let self = this;
if (iframe.attachEvent) {
    iframe.attachEvent("onload", function () {
        self.$refs.iframePage.contentWindow.postMessage(data,*);
    });
} else {
    iframe.onload = function () {
        self.$refs.iframePage.contentWindow.postMessage(data, *');
    };
}