在移动开发中,我们必不可少需要使用Web来代替部分Native,也就是业内所说的Hybrid App。
一、基本信息介绍
Ios 和 Android两种终端与Javascript的通信机制有些不同:
- Ios 机制:
(1)Native可直接调用Js,并可直接获取Js的返回值(这点与Android不同)
(2)Js不能直接调用Native,但可以通过反向调用,流程就是先将消息临时存储在Js端,然后通知Native反向调用获取消息内容
(实现原理是利用 shouldStartLoadWithRequest,就是Web的所有URL请求都会触发Native的行为)
- Android 机制:
(1)Native可直接调用Js,但不可直接获取Js的返回值(这点与Ios不同)
(2)Native注册addJavascriptInterface 后,Js 可直接调用Native的接口,并获取Native的返回值
(3)通过 shouldOverrideUrlLoading,也还是拦截Web的所有URL请求来达到通信的目的
二、存在的问题:
- Android addJavascriptInterface 的风险,可见乌云报道 ,简单的说法就是:通过反编译获取Native注册的Js对象,然后在页面通过反射Java的内置静态类,获取一些敏感的信息和破坏(api17已经采用@JavascriptInterface限制Js调用Native,但是历史版本还是存在风险问题)
三、最终采取的Js Bridge方案:
1. github上一篇 https://github.com/marcuswestin/WebViewJavascriptBridge
该项目提供了Ios上与Js通信的方案,原理如下:
(1)初始化创建的一个style.display=none 的iframe,并将iframe.src设置为自有协议,每次Js需要与Native通信时,Js端主动调用iframe.src即可,Native收到请求通知后,反向调用fetchQueue(可见源码)获取消息内容;若Native需要与Js通信,直接调用Js,并获取返回值
(2)Js——>Native:
Js将要发送的消息存放在Js端——>调用iframe.src,触发通知Native——>Native拦截请求,调用Js bridge里面的fetchQueue并获取返回的消息内容,处理消息——>将需要返回的数据通过直接调用Js的方式,让Js处理
(3)Native——>Js:
Native可直接调用Js并获取返回的内容
2. 移植到Android:
(1)由于上面的一2(1)限制,上面三1 (2)直接获取Js的返回值在Android上走不通,代替的方案是通过 shouldOverrideUrlLoading 携带Js的返回值
(2)其他流程与Ios一致
(3)移植的Android 代码github 地址:https://github.com/jacin1/JsBridge
网友评论