vue中使用iframe+postMessage进行跨项目的通信

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中不生效。

单纯记录学习过程！