|
@@ -1,27 +1,29 @@
|
|
|
-// iframe 通信中心
|
|
|
class MessageCenter {
|
|
|
constructor() {
|
|
|
- // 缓存事件队列
|
|
|
+ this.iframeMap = new Map();
|
|
|
this.messageCallbackMap = new Map();
|
|
|
- this.messageFailbackMap = new Map();
|
|
|
- this.init()
|
|
|
+ // this.listen()
|
|
|
}
|
|
|
|
|
|
- send({ actionType, data, callback, overTime, failback }) {
|
|
|
- window.parent.postMessage({
|
|
|
+ findIframeById(id) {
|
|
|
+ let target = this.iframeMap.get(id);
|
|
|
+ if (!target) {
|
|
|
+ target = document.getElementById(id)
|
|
|
+ this.iframeMap.set('id', target)
|
|
|
+ }
|
|
|
+ return target
|
|
|
+ }
|
|
|
+
|
|
|
+ send(id, actionType, data) {
|
|
|
+ const target = this.findIframeById(id);
|
|
|
+ target && target.contentWindow.postMessage({
|
|
|
actionType,
|
|
|
data
|
|
|
- }, '*');
|
|
|
- if (data.messageID && callback) {
|
|
|
- // 带回调callback 的message, 要求携带messageID,callback,failback等
|
|
|
- this.listen(`${actionType}-${data.messageID}`, callback)
|
|
|
- if (failback) {
|
|
|
- this.addFailback(`${actionType}-${data.messageID}`, overTime, failback)
|
|
|
- }
|
|
|
- }
|
|
|
+ }, '*')
|
|
|
}
|
|
|
|
|
|
- listen(actionType, callback) {
|
|
|
+ // don't use
|
|
|
+ add(actionType, callback) {
|
|
|
let activeQuene = this.messageCallbackMap.get(actionType);
|
|
|
if (activeQuene?.length > 0) {
|
|
|
activeQuene.push(callback)
|
|
@@ -29,56 +31,20 @@ class MessageCenter {
|
|
|
this.messageCallbackMap.set(actionType, [callback])
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- addFailback(actionType, overTime = 2000, failback) {
|
|
|
- let failbackQuene = this.messageFailbackMap.get(actionType);
|
|
|
- if (failbackQuene && failbackQuene.failCallbackList) {
|
|
|
- failbackQuene.failCallbackList.push(
|
|
|
- failback
|
|
|
- )
|
|
|
- } else {
|
|
|
- this.messageFailbackMap.set(actionType, {
|
|
|
- time: new Date().getTime(),
|
|
|
- overTime,
|
|
|
- failCallbackList: [failback]
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- init() {
|
|
|
+ // don't use
|
|
|
+ listen() {
|
|
|
window.addEventListener('message', (e) => {
|
|
|
const { actionType, data } = e.data;
|
|
|
- this.messageFailbackMap.delete(actionType);
|
|
|
+ console.log('get message in content ...', actionType, data)
|
|
|
const quene = this.messageCallbackMap.get(actionType) || [];
|
|
|
- let index = 0;
|
|
|
- while (index < quene.length) {
|
|
|
- const callback = quene[index];
|
|
|
+ while (quene.length > 0) {
|
|
|
+ let callback = quene.pop();
|
|
|
callback(data)
|
|
|
- index++
|
|
|
}
|
|
|
})
|
|
|
- setInterval(() => {
|
|
|
- // 轮询查看有无超期的message信息
|
|
|
- const now = new Date().getTime();
|
|
|
- for (let item of this.messageFailbackMap.values()) {
|
|
|
- if (now - item.time > item.overTime) {
|
|
|
- let index = 0;
|
|
|
- while (index < item.failCallbackList.length) {
|
|
|
- const callback = item.failCallbackList[index];
|
|
|
- callback({
|
|
|
- error: 0,
|
|
|
- msg: "message 超时错误"
|
|
|
- })
|
|
|
- index++
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }, 1000)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-// messageCenter在每个iframe内实例化一次
|
|
|
const messageCenter = new MessageCenter();
|
|
|
|
|
|
export default messageCenter;
|