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
閱讀更多 掌趣科技 的文章
