send 调用方会轮询发送postMessage信息。
receive 调用方会向 send 调用方发送确认信息使它停止轮询。
/** | |
* @file 使用postMessage通讯 | |
*/ | |
/** ================= sender ======================= */ | |
const senderTime = {} | |
/** | |
* send 调用方会轮询发送postMessage信息 | |
* receive调用方会向 send 调用方发送确认信息使它停止轮询。 | |
* @param {window} target 消息发送目标 | |
* @param {string} eventType 消息发送类型 | |
* | |
* @eg 使用方法 | |
* const openWindow = window.open('http://localhost:3000/') | |
send(openWindow.window, "MSG_TOKEN", { | |
token: "hey, here is the token value", | |
otherMessage: 'hello', | |
}); | |
*/ | |
export function send(target, eventType, message) { | |
const senderWindow = target | |
if (!senderWindow) { | |
return | |
} | |
senderTime[eventType] = setInterval(() => { | |
senderWindow.postMessage({ | |
type: eventType, | |
message | |
}, '*') | |
}, 600); | |
// 来自接收方的确认消息 | |
window.addEventListener('message', (e) => { | |
console.log('add'); | |
const { data: { type, message } } = e | |
if (type === `${eventType}_FROM_RECEIVE` && message === 'ACK') { | |
if (senderTime[eventType]) { | |
clearInterval(senderTime[eventType]) | |
} | |
senderTime[eventType] = null | |
} | |
}, false) | |
} | |
/** ================= receiver ======================= */ | |
/** | |
* send方会轮询发送postMessage信息 | |
* receive调用方会向 send 调用方发送确认信息使它停止轮询。 | |
* @param {string} eventType 消息发送类型 | |
* @param {function} cb 消息获取成功回调 | |
* @eg 使用方法 | |
* receive('MSG_TOKEN', (e) => { | |
console.log(e) | |
}) | |
*/ | |
export function receive(eventType, cb) { | |
window.addEventListener('message', (e) => { | |
const { data: { type } = {} } = e | |
if (type === eventType) { | |
cb(e) | |
if (window.opener) { | |
window.opener.postMessage({ | |
type: `${eventType}_FROM_RECEIVE`, | |
message: 'ACK' | |
}, '*') | |
} | |
} | |
}, false) | |
} | |