Kindi丶
Kindi丶
  • 发布:2020-03-26 13:56
  • 更新:2020-10-10 16:33
  • 阅读:2725

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

分类:uni-app

页面是 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 负责人:无 分享
已邀请:
沉末

沉末

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

DCloud_App_Array

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发送的信息,以及要如何发送?谢谢

    3 小时前

xiaoxiao昱

xiaoxiao昱

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

6***@qq.com

6***@qq.com

建议看一下picker源码实现

1***@qq.com

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发消息又无法监听到了。

好惆怅。。。

t***@qq.com

t***@qq.com

mui.fire() 试一下,表妹

3***@qq.com

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

遇到同样的问题 郁闷中

3***@qq.com

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

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

3***@qq.com

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

想念原生+H5配合 想怎么定制需求都可以。。。。。。。

m***@qq.com

m***@qq.com

plus.webview.create 有点坑。 估计还有很多潜在问题。
参考:https://ask.dcloud.net.cn/question/108369

要回复问题请先登录注册