Android WebView与H5交互汇总

Android WebView与H5交互汇总,第1张

目前APP中内嵌Web页面非常常见,为了Web网页可以和原生进行交互,需要设计一套js-bridge,而这个桥接的设计底层都还是依赖系统提供的Webview与H5的交互,现有交互方式汇总如下:

1、原生调用JS

原生调用JS即在原生代码中调用执行当前网页中js代码,现有两种方法

1)WebView#loadUrl("javascript:func('" + arg + "')") 2) WebView#evaluateJavascript(String script, @Nullable ValueCallback resultCallback)

其中第二种方法,从android4.4版本才支持,两种方法比较起来,也是第二种方法优于第一种方法:

1)第二种方法执行效率比第一种方法高 

2)第一种方法会触发页面刷新,第二种方法不会触发页面刷新

3)第二种方法可以直接获取js函数执行的返回值,而第一种想要获取返回值比较麻烦,需要设计一套机制,通过JS调用原生的方式把返回值传递过来

2、H5调用原生

即H5主动调用原生代码,可以执行原生函数或者获取原生返回的数据,通常有3中方法:

1)WebView#addJavascriptInterface(Object object, String name) 进行对象映射
2)WebViewClient#shouldOverrideUrlLoading() 来拦截Url调用代码
3)WebChromeClient 的 onJsAlert()、onJsConfirm()、
onJsPrompt() 拦截 js 中的对话框 alert() / confirm() / prompt()

实际上第一种方法是官方提供的H5调用原生的方法,后面两种是利用官方API规则自己模拟实现了H5调用原生的方法。

第一种方法类似于注入一个JS对象到H5页面中,而这个JS对象映射到了一个JAVA对象,在H5中直接调用这个JS对象的方法就可以调用到AVA对象,它的效率也是比较高的。但是因为这个设计在4.2以前的版本有安全漏洞,所以之前很多人放弃了这种调用方式。漏洞在4.2的版本解决了,简单讲就是供JS调用的方法添加注解@JavascriptInterface即可。

第二种第三种本质是一样的,拿第二种举例,在H5端发起页面跳转时,首先会被原生的shouldOverrideUrlLoading()函数拦截并决定是否进行跳转,那么我们可以约定一个特定格式的URL,当拦截到跳转发现是这种格式的URL,我们可以认为这是一个H5发起的桥接调用,我们解析执行原生代码,不进行跳转。例如拦截到的URL格式为:myapp://getuser?param=xxxxx,我们可以认为myapp开头的就是我们约定的桥接函数,后面的getuser是函数名,需要的入参和返回值回调函数通过param的值获取。这种拦截的方式实现,把原生的值返回给H5比较麻烦,通常的实现思路是在H5中给回调函数制定一个编号,原生通过上面原生调用H5的方法调用H5的处理函数,把回调函数编号和结果传递过去,再由H5的处理函数执行回调函数。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/992500.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-21
下一篇 2022-05-21

发表评论

登录后才能评论

评论列表(0条)

保存