IOS和Android在与js交互的差别

[转载来自Ios Android Hybrid app 与 Js Bridge](http://blog.csdn.net/jacin1/article/details/39993935)

在移动开发中，我们必不可少需要使用Web来代替部分Native，也就是业内所说的Hybrid App。
一、基本信息介绍

Ios 和 Android两种终端与Javascript的通信机制有些不同：
1. Ios 机制：
 （1）Native可直接调用Js，并可直接获取Js的返回值（这点与Android不同）
 （2）Js不能直接调用Native，但可以通过反向调用，流程就是先将消息临时存储在Js端，然后通知Native反向调用获取消息内容
        （实现原理是利用 shouldStartLoadWithRequest，就是Web的所有URL请求都会触发Native的行为）
2. Android 机制：

 （1）Native可直接调用Js，但不可直接获取Js的返回值（这点与Ios不同）
 （2）Native注册addJavascriptInterface 后，Js 可直接调用Native的接口，并获取Native的返回值
 （3）通过 shouldOverrideUrlLoading，也还是拦截Web的所有URL请求来达到通信的目的

二、存在的问题：

1. Android addJavascriptInterface 的风险，可见 乌云报道 ，简单的说法就是：通过反编译获取Native注册的Js对象，然后在页面通过反射Java的内置

静态类，获取一些敏感的信息和破坏（api17已经采用@JavascriptInterface限制Js调用Native,但是历史版本还是存在风险问题 )

三、看看大厂的做法：
1. 笔者Google了N久，想了解一下大厂们的做法，暂且找到以下几篇有价值的文章：
（1） 淘宝2012彩票项目  文章找到的Android做法还是通过addJavascriptInterface方式
（2） 手机淘宝技术分享  文章说到了在Android和 Ios上采取类PhoneGap方式，分别实现了Js bridge，但是笔者找了好久也找不到具体的开源（可能没有开源）

（3） 鹅厂的一篇文章  文章也是采用addJavascriptInterface的方式，不过给笔者的灵感是其优雅的接口

四、最终采取的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

下一篇将详细介绍代码级别的内容