vue中使用iframe+postMessage进行跨项目的通信
一、需求说明:遥远世界那头的一个暴发户,不想和我们的系统产生任何关系,又想使用我们的修改密码模块的组件(前提:他本身登录模块的数据库是我们的数据库,所以还好token能通过我们后台的验证),所以只好想到用iframe来实现了。(暴发户简称A我们简称B)
二、使用说明
1.A团队需要在他们自己的平台上引入B方提供的代码片段,该代码片段可作为组件使用,A方自行决定在何处使用。
1.1代码片段说明如下(主要面向前端技术栈为vue的使用方,且系统已引入element ui组件)
三、A需要引入的代码
<template>
<div>
<el-button type="primary" @click="openDisa()">修改密码</el-button>
<el-dialog
title="修改密码"
:visible.sync="dialogVisible"
width="30%"
>
<div v-if="dialogVisible"
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)">
<iframe id="child" ref="child" src="http://127.0.0.1:8080#/passWord "
height="315px" width="100%" @load="sendToken()"
></iframe>
</div>
</el-dialog>
<!-- @load="sendToken()"使得iframe挂载完成后再执行postMessage,不然就会出现第一次点击修改密码时,token传递失败的情况-->
</div>
</template>
<script>
export default {
name: "index",
data() {
return {
dialogVisible: false,
token: {IframePasswordtoken: ''},
loading: false,
}
},
methods: {
sendToken() {
let that = this
// sessionStorage.setItem("IframePasswordtoken", '2fdc8f873d4141199f89611148537d74')
// 此处为A团队浏览器储存的token信息,且必须存储字段名为:IframePasswordtoken,以便于B方获取token信息
let token = sessionStorage.getItem("IframePasswordtoken");
this.token.IframePasswordtoken = token
that.$refs['child'].contentWindow.postMessage(this.token, '*');
this.loading = false;
},
openDisa() {
this.dialogVisible = true
this.loading = true;
},
closeDisa() {
this.dialogVisible = false
}
},
mounted() {
let that = this
window.addEventListener("message", function (messageEvent) {
if (messageEvent.data.success == 1) {
console.log(messageEvent.data)
that.$message.success("修改成功!");
that.closeDisa()
} else if (messageEvent.data.cancel == 0) {
that.closeDisa()
}
}, false)
}
}
</script>
<style scoped>
</style>
iframe页面效果图
四、B项目的组件代码
在这里对A页面传过来的值进行接收,在这里主要是接收token,因为我主要是用token来验证身份,进一步进行密码的修改,至于传什么值,你开心就好。
mounted() {
let that = this;
监听postMessage传过来的值
window.addEventListener('message', function (messageEvent) {
var data = messageEvent.data;
// that.params.token = data;
sessionStorage.setItem("IramePasswordtoken", data.IramePasswordtoken);
console.log('message from child:', data);
// console.log('message from child:', that.params.token);
}, false);
}
坑点:postMessage传值要在iframe挂载完成后才能正确执行,所以要在src中使用@load=" “, 之前我用的是οnlοad=”",不好意思在vue中不生效。
单纯记录学习过程!