关于调用 HTML5+ 的扩展规范创建的webview（plus.webview.create）如何监听网页发送消息

分类：uni-app

Webview plus HTML5+ uniapp

页面是 nvue的

const wv = plus.webview.create(loadURL || 'http://10.48.240.50:5000/index.html', 'custom-webview', {  
        'uni-app': 'none',  
        top: statusBarHeight + 44,  
        bottom: 0,  
        // 进度条颜色  
        progress: {  
          color: '#4CD964'  
        }  
 })

如何监听网页发送的消息呢？

我尝试监听 message 事件，但是没有效果。
查阅文档也没有发现相关的事件类型。
http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewEvent

请问这杨创建的 webview 是没有办法通信的吗？

2020-03-26 13:56 负责人:无分享

14 个回复

沉末

uni-app的vue页面本身是一个webview，vue页面里的web-view组件，其实是一个子webview。

这样解决了：
1、用的web-view 组件
2、通过使用plus代码获得当前webview的对象，再获取子webview，这样就可以得到web-view组件所对应的plus的webview对象。
3、使用plus的evalJS方法。

如下：
let currentWebview = this.$mp.page.$getAppWebview() //获取当前页面的webview
let _webview = currentWebview.children()[0] //获取子webview，这个里面加载的就是我们的h5
_webview.evalJS('notification("evalJS: "+location.href);'); //调用evalJS执行 h5中自定义的全局的方法notification，这个方法就可以用来监听webview向h5发送的消息

参考：https://ask.dcloud.net.cn/article/35083

3***@qq.com - uni-app开发

主要是uni-app的官方map组件不给力只能内嵌webview使用高德地图，然后页面会和高德地图页面产生交互

DCloud_App_Array

nuve中使用webview-view组件发送消息请参考：https://uniapp.dcloud.io/component/web-view
注意要用 @onPostMessage 接收。
如果是使用 plus.webview.create 创建的Webview窗口，目前还不支持相互通讯。

Kindi丶 (作者)

那请问，我能通过组件拿到webview的实例吗？因为组件给的配置项只有3个参数，不太能满足需求呢。

2020-03-26 15:16
DCloud_App_Array

回复 Kindi丶: 组件不是webview窗口对象，无法获取。

2020-03-26 16:09
Kindi丶 (作者)

回复 DCloud_App_Array: vue 页面可以通过获取当前weview 然后再获取子webview的方式拿到 webview对象，为什么nvue页面没有办法拿呢？

我不太明白。

2020-03-30 15:27
DCloud_App_Array

回复 Kindi丶: vue页面是webview窗口渲染的，可以拿到webview窗口对象；nvue页面是原生层渲染的，并不是webviwe窗口对象，所以也拿不到webview窗口对象。

2020-03-30 16:00
9***@qq.com

使用 plus.webview.create 创建的Webview窗口，目前还不支持相互通讯。

请问现在支持了吗

2020-07-10 14:08
mcNull

回复 9***@qq.com: 现在支持了吗

2020-09-03 10:57
1***@qq.com

现在支持了吗

2020-09-18 09:31
次谐波

那只能投机了。通过修改title，监听titleUpdate。

2020-09-22 23:55
WuGuoCai

你好，在uniapp 通过 plus.webview.create 创建的Webview窗口,如何监听webview发送的信息，以及要如何发送？谢谢

2022-05-24 09:36
牛牛2021

现在支持了吗

2022-10-16 23:36

xiaoxiao昱

我也有相同的需求，希望通过create创建的webview能够跟App进行通讯

6***@qq.com

建议看一下picker源码实现

1***@qq.com

create创建的webview 接受 UniAppJSBridge 的事件有办法了吗？

沉末

同问，有什么好的方法么？

想实现 h5向webview发消息，webview也可向h5发消息
1、web-view 组件可以让h5向webview发消息（uni.postMessage）并监听message事件，但是webview没法向h5发消息
2、plus.webview.create 方法可以通过注入 evalJS来执行h5的代码，相当于可以向h5 发消息，但是如楼主的问题：h5向webview发消息又无法监听到了。

好惆怅。。。