VUE - iframe消息通信postMessage

VUE - iframe消息通信postMessage

 

1. 准备两个 vue 项目 

　　1） 项目1，地址：http://cdeserver.railplus.com:8000/

　　2） 项目2，地址：http://localhost:8081/

 

2. 在项目2中 iframe 引入

1) web_config.js  ，在 public 中 准备配置文件  

window.config = {
    iframeUrl: 'http://cdeserver.railplus.com:8000/'
}

 

2) index.html ， 在 public 中 <head> 引入 web_config.js

  <script type="text/javascript" src="./web_config.js"></script>

 

 在 <body> 中写入 iframe

  <div class="iframe">
    <iframe id="iframeCDE" class="iframe" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"
      allowtransparency="yes"></iframe>
  </div>

　在js中设置 iframe 的地址，注意：先设置地址，再注册接收信息方法

<script>
  window.onload = function () {
    document.getElementById('iframeCDE').setAttribute('src', window.config.iframeUrl);
    Register_tid();
  }
</script>

　　

　　

3) tidings_client.js ，在 public 中 准备通信中间件文件  

//调用记录，返回数据 callNo:{}
let CallRecord = {};

//注册
let Register_tid = () => {
    // 监听子级给父级发送过来的消息
    window.addEventListener(
        "message",
        function (event) {
            let origin = event.origin;
            let callNo = event.data.callNo;
            if (origin == window.config.iframeUrl && CallRecord[callNo])
                CallRecord[callNo]();
        },
        false
    );
}


let CallMethodName = {
    SetLocate: 'SetLocate',
    SetHighlight: 'SetHighlight'
}

// 通信调用
let TidCall = {

    //设置定位
    SetLocate: (primityFlag, callBackFunction) => {
        postMessage(CallMethodName.SetLocate, {
            primityFlag: primityFlag
        }, callBackFunction);
    },

    //设置高亮
    SetHighlight: (primityFlag) => {
        let callNo = getCallNo();
        postMessage(CallMethodName.SetHighlight, {
            callNo: callNo,
            primityFlag: primityFlag
        });
    }
}

//获取CallNo
getCallNo = () => {
    return `NO${Math.round(Math.random() * 10000000000)}`;
}

//消息发送
postMessage = (methodName, data, callBackFunction) => {
    let callNo = getCallNo(); //调用唯一主键
    data.callNo = callNo;
    var iframe = document.getElementById("iframeCDE");
    var iframeWindow = iframe.contentWindow;
    var targetOrigin = window.config.iframeUrl; // 'http://cdeserver.railplus.com:8000'; "*";
    iframeWindow.postMessage({
        methodName: methodName,
        data: data
    }, targetOrigin);

    if (callBackFunction) CallRecord[callNo] = callBackFunction;
}

　　

　　

在 public 中 <head> 引入 web_config.js

  <script type="text/javascript" src="./tidings_client.js"></script>

 

 

3. 在项目1 中 配置

1） 创建 tidings_server.js ，配置 通信中间件 src / views / tidings_server.js

import CesiumUtil from './views/main2/utils/cesiumUtil';

//注册
let Register_tid = () => {
  window.addEventListener(
    'message',
    function (event) {
      Analysis(event);
    },
    false
  );
}

let CallBackTid = (data) => {
  console.log('CallBackTid');
  window.top.postMessage(data, '*');
}


//解析
let Analysis = (event) => {
  let methodName = event.data.methodName;
  let data = event.data.data;
  eval(`${methodName}(${JSON.stringify(data)})`);
}

//设置定位
let SetLocate = (data) => {
  let callNo = data.callNo;
  CesiumUtil.LocateModel(data.primityFlag);
  //回调
  CallBackTid({
    callNo: callNo,
    message: '回调结果。'
  });
}

export {
  Register_tid
}

　　

　

2） 在 App.vue 中引入 tidings_server

import { Register_tid } from './tidings_server';

　　

在 mounted 中注册

Register_tid();

　　

4. 测试

在 项目1 中 调用 通信组件

在 项目1 中 某 vue页 创建一个按钮，事件如下，其中 fun_txt 为回调函数

    fun_txt() {
      this.msg = "99999";
    },
    fun_message() {
      TidCall.SetLocate(1222, this.fun_txt);
    },

　　

 

完成！

 

 

 

 引用：https://blog.csdn.net/qq_42052896/article/details/112496460

 

posted @ 2022-05-06 16:55  无心々菜  阅读(1219)  评论(0)    收藏  举报