JSBridge是什么
顾名思义：就是JavaScript(H5)与Native通信的桥梁，在H5开发中经常有操作客户端的需求，比如获取App信息，打开/关闭一个WebView，吊起支付面板等等，但这些功能只能在Native中实现，因此诞生JSBridge，通过JSBridge与Native通信，赋予了JavaScript操作Native的能力，同时也给了Native调用JavaScript的能力。
JSBridge与Native间通信原理
在H5中JavaScript调用Native的方式主要用两种
1.注入API，注入Native对象或方法到JavaScript的window对象中（可以类比于RPC调用）。
2.拦截URL Schema，客户端拦截WebView的请求并做相应的操作（可以类比于JSONP）。
下面将以Android端的JSBridge通信为例，讲解这两种方式的实现原理（本人比较菜，只会Java不会Swift和OC）。
注入API
通过WebView提供的接口，向JavaScript的window中注入对象或方法(Android使用addJavascriptInterface()方法)，让JavaScript调用时相当于执行相应的Native逻辑，达到JavaScript调用Native的效果。
对于Android实现方式如下，核心代码在于
示例如下
在Android的main页面放一个Webview
然后Android端对应的代码如下
对于JavaScript侧，则可以直接调用Native端注入的InjectNativeObjec对象的方法
实际效果如下，其中login按钮点击调用Native端openNewPage方法并传相应的参数给客户端。
缺陷： Android4.2及以下的版本使用addJavascriptInterface方法有漏洞
该漏洞源于程序没有正确限制使用WebView.addJavascriptInterface方法，远程攻击者可通过使用Java Reflection API利用该漏洞执行任意Java对象的方法，简单的说就是通过addJavascriptInterface给WebView加入一个JavaScript桥接接口，JavaScript通过调用这个接口可以直接操作本地的Java接口。
在Android4.2以上提供@JavascriptInterface注解来规避该漏洞，但对于4.2以下版本则没有任何方法。所以使用该方法有一定的风险和兼容性问题。
拦截URL Schema
H5端通过iframe.src或localtion.href发送Url Schema请求，之后Native（Android端通过shouldOverrideUrlLoading()方法）拦截到请求的Url Schema（包括参数等）进行相应的操作。
通俗点讲就是，H5发一个普通的https请求可能是: https://daydream.com/?a=1&b=1， 而与客户端约定的JSBridge Url Schema可能是: Daydream://jsBridgeTest/?data={a:1,b:2}，客户端可以通过schema来区分是JSBridge调用还是普通的https请求从而做不同的处理。
其实现过程原理类似于JSONP
1.首先在H5中注入一个callback方法，放在window对象中
然后把callback的名字通过Url Schema传到Native
2.Native通过shouldOverrideUrlLoading()，拦截到WebView的请求，并通过与前端约定好的Url Schema判断是否是JSBridge调用。
3.Native解析出前端带上的callback，并使用下面方式调用callback
或者
通过上面几步就可以实现JavaScript到Native的通信。下面可以看看处理Url Schema的拦截的shouldOverrideUrlLoading方法的相关例子
示例
Android页面布局
Android端代码如下
JavaScript侧
window上挂载的方法在Native中可以使用webView.loadUrl() / webView.evaluateJavascript()调用
基于JSONP原理可以定义JSBridge类
JavaScript使用例子
效果如下
缺陷： 使用URL Schema有一定的长度问题，url过长可能会导致丢失; 一次JSBridge调用耗时可能比较长，创建请求需要一定的时间。
总结
本文简单介绍了JSBridge以及在Android端的通信，通过相应的分析与代码实现可以发现JSBridge原理其实并没有那么难，因此希望本文能对读者对JSBridge有一定的理解，最后生活不止有前端，还有客户端在等着咱o(T^T)o
本文来自投稿，不代表本人立场，如若转载，请注明出处：http://www.souzhinan.com/kj/252826.html