uniapp，app/H5中，webview与嵌套的html相互通信

    <web-viewid="xxxView"ref="xxxViewRef":src="`/hybrid/html/http.html?${paramsInfo}`" />

这样一段代码，webview嵌了一个本地html
希望它们相互通信传递消息

如果是在APP中，很简单

webview→html

      // const webview = this.$scope.$getAppWebview().children()[0]// webview.evalJS(`updateCanvasSize(${x}, ${y}`)

html→webview
html中引入（在官网下载）

 <script type="text/javascript" src="./webview.js"></script>

html中

			uni.postMessage({data: {action: 'xxxError',data: true}})

webview接收

    <web-viewid="xxxView"ref="xxxViewRef":src="`/hybrid/html/http.html?${paramsInfo}`" @message="webViewMessage" />webViewMessage(e) {console.log('收获数据----《', e.detail.data[0])},

H5中

H5中，上面这套不支持，得用postMessage

举例：
webview→html
webview中：

        const iframe = this.$refs.xxxViewRef.iframe.contentWindowiframe.postMessage('image port', '*', [event.ports[0]])const iframe = this.$refs.xxxViewRef.iframe.contentWindowiframe.postMessage({type: 'channelEvent',value: {ch_type: ch_type,ch_id: ch_id,event: event}}, '*')

html中监听，处理：

        window.addEventListener('message', function (event) {console.log('监听event--------->', event.data, event.data.type)if (event.data === 'image port') {event.ports[0].onmessage = xxxImageMessagexxxInterface.onPortReady()}if (event.data && event.data.type == 'channelEvent') {channelEvent(event.data.value.ch_type,event.data.value.ch_id,event.data.value.event)}if (event.data && event.data.type == 'updateCanvasSize') {updateCanvasSize(event.data.value.x, event.data.value.y)}})

html → webview
html中：

				window.parent.postMessage({type: 'channelEvent',event: event}, '*')

webview中：

    this.messageListener = (event) => {// 收获的连接信息 针对返回的数据做处理if (event.data?.type == 'channelEvent') {const info = event.data.eventconsole.log('接收到html event---->', info)this.xxxHandle(info)}}window.addEventListener('message', this.messageListener)