flutter和webview交互bridge封装,全局可用
flutter和webview交互bridge封装,全局可调用。
·
flutter和webview交互bridge封装,全局可调用。
使用window.addEventListener('message')实现,特殊的webview需要使用window.chrome.webview.addEventListener('message')
export default class MessageManager {
constructor(source: string) {
this.source = source
this.handlers = {} // 存储处理函数
window.addEventListener('message', this.handleMessage.bind(this))
if (source === 'pc') {
window.chrome.webview.addEventListener('message', this.handleMessage.bind(this))
}
}
handleMessage(event) {
const { type, data } = typeof event.data === 'string' ? JSON.parse(event.data) : event.data
const handler = this.handlers[type]
if (handler) {
handler(data)
} else {
console.warn(`No handler found for message type: ${type}`)
}
}
addHandler(type, handler) {
if (!this.handlers[type]) {
this.handlers[type] = handler
} else {
console.warn(`Handler for type "${type}" already exists.`)
}
}
removeHandler(type) {
delete this.handlers[type]
}
postMessage(type: string, payload: any) {
const message = JSON.stringify({ type, payload })
if (this.source === 'pc') {
window.chrome.webview.postMessage(message)
} else {
window[type] && window[type].postMessage(JSON.stringify(payload))
}
}
}
main.ts中使用,并注入到全局
const messageManager = new MessageManager()
// 发送消息
messageManager.postMessage('SEND', {})
// 接收消息
messageManager.addHandler('GET', function (data) {
console.log('handler your data')
})
更多推荐
所有评论(0)