vue中使用

时间：2025-03-28 13:51:23

参考MDN: /zh-CN/docs/Web/API/Window/postMessage

一、发送端

1.发送消息的基本语法

targetWindow.postMessage(message, targetOrigin, [transfer])

及参数说明

① targetWindow 表示接收消息的窗口的引用。获得该引用的方法包括：




 +索引值
② message 表示发送端发送给接收端的消息
③ targetOrigin 表示能接收到消息事件的窗口

其值可以是字符串"*"（表示无限制）或者一个 URI。

④ transfer 可选，是一串和 message 同时传递的 Transferable 对象。这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

3.示例

const targetWindow = window.open('https:xxx')
targetWindow.postMessage(message, 'https:xxx')

二、接收端

1.接收消息基本语法

接收端有一个事件监听器，监听 “message” 事件，同时我们要验证消息来源地址，以确保是个可信的发送地址。

window.addEventListener('message', receiveMessage, false)
function receiveMessage(event) {
	console.log('消息来源地址', event.origin)
	console.log('接收到的消息', event.data)
	console.log('对发送消息的窗口对象的引用; 您可以使用此来在具有不同 origin 的两个窗口之间建立双向通信。', event.source)
	if (event.origin !== 'https:xxx') 
		return
}

2.示例

window.addEventListener('message', function (event) {
	if (JSON.parse(event.data)&&JSON.parse(event.data).token) {
    	sessionStorage.setItem('token', JSON.parse(event.data).token)
    }
    
    if (event.data === 'closePage') {
        this.unInit();
    }
	
	//  为父页面，可再使用postMessage方法，父页面监听message事件
    window.parent.postMessage('子页面消息', '父页面地址')
}, false);

三、问题：

[描述] 通过postMessage传递过程中，无法通过模拟点击事件进行数据传值

[分析] postMessage是宏任务，触发机制会先放到浏览器的消息队列中，然后再进行处理，vue、react都会自己实现自己的事件机制，而不触发真正的浏览器的事件机制

[解决方案] 使用setTimeout处理，将事件处理放在浏览器idle阶段触发回调函数的处理，需要注意传递message的大小

相关文章