使用iframe跨域通信【Window postMessage 方法】

<template>
<iframe id="iframe" ref="iframe" :src="uri" frameborder="0" scrolling="auto">
</iframe>
</template>

<script>
export default {
data() {
return {
drawerLoading:false,
uri:"http://10.54.49.149:80/iframe/itsm",
};
},

created() {
//给子窗口发送参数
this.postMessage()

//接收子窗口传递的参数
this.getMessage();
},
mounted() {

},
methods: {
//给子窗口发送信息
postMessage(row) {
/**
* iframe加载子窗口完成时通过postMessage传递数据
*/
this.drawerLoading = true;
this.$nextTick(() => {
let mapFrame = this.$refs["iframe"];
mapFrame.onload = () => {
this.drawerLoading = false;
let iframeWin = mapFrame.contentWindow;
iframeWin.postMessage(
{//给子窗口传递的参数
code: "itsm",
params: {
documentId: "",
modelId: "3",
instanceSelectAbled: true,
},
},
this.uri //给哪个域名下的子窗口发送【可改为 *,即通配】
);
};
});
},

//接收子窗口传递的参数
getMessage() {
window.onmessage = this.handleMessage;
// window.addEventListener("message", this.handleMessage);
},
handleMessage(event) {
let data = event.data;
if (data && data.code) {
if (data.params.method === "cancel") {
//取消

} else {
//确认、删除
if (data.params.res.code !== "S1A00000") {
return this.$message.error(data.params.res.msg);
}

this.$message({
message: data.params.res.msg,
type: "success",
});

}
} else {
}
},
},
};
</script>
<style >
#iframe {
width: 100%;
height: 100%;
overflow: auto;
}
</style>