send 调用方会轮询发送postMessage信息。
receive 调用方会向 send 调用方发送确认信息使它停止轮询。
Last active
September 1, 2021 08:04
-
-
Save ubbcou/acaf00a1996cd80ec7ecfc53869de09c to your computer and use it in GitHub Desktop.
postMessage 消息发送与确认发送成功
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * @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) | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment