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
