1. H5需要喚起Native分享元件把內容分享到其他App裡;
2. 當手機網路從3G切換到WIFI時，需通知H5展示更為清晰的商品圖片；

類似這樣的通訊場景很多，那麼如何實現H5和Native通訊呢？下面以IOS平臺，來進行剖析：

H5和Native的通訊，可以簡化為js和object-c兩種語言的通訊。

object-c呼叫js方法和js變數、方法注入

在IOS底層框架，提供了一個非常有用的API:stringByEvaluatingJavaScriptFromString，藉助於這個API，能夠實現object-c呼叫js方法以及js變數、方法的注入

在H5頁面定義了一個getInutName

function getInputName(){
    return "ok";
}

通過如下程式碼object-c就可以呼叫到H5定義的方法getInputName，並且把返回值賦值給returnvalue

NSString *returnvalue = [webView stringByEvaluatingJavaScriptFromString:@"getInputName()"];//ok

object-c還可以完成js方法和變數注入

NSString *network = @"'wifi'";
NSString *javascriptCommand = @"function test
 
(){return 'ok';};var network=";
javascriptCommand = [javascriptCommand stringByAppendingString:network];
[webView stringByEvaluatingJavaScriptFromString:javascriptCommand];

這樣H5就可以使用test方法和network變數

object-c還可以讀取一個JS檔案，完成JS方法批量匯入

NSBundle *bundle = [NSBundle mainBundle];
NSString *filePath = [bundle pathForResource:@"WebViewJavascriptBridge.js" ofType:@"txt"];
NSString *
 
js = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];
[webView stringByEvaluatingJavaScriptFromString:js];

js呼叫object-c方法

在IOS7及以下版本，目前js還無法直接呼叫object-c定義的API，但在Mac OSX，js已經可以呼叫object-c定義的API，詳細請見這裡，查閱了相關文件，在IOS8預覽版已支援類似Mac OSX的呼叫方式，有待驗證。

雖然無法直接呼叫object-c定義的API，但可以另闢蹊徑。

在H5頁面js執行以下2種操作，都會被H5所在的WebView捕獲，同時執行相關object-c程式碼。

1. 改變location.href

window.location.href = mytestscheme://callfunction/parameter1/parameter2?parameter3=value

2. 建立iframe，設定src，並插入到body節點

function execute(url) 
{
  var iframe = document.createElement("IFRAME");
  iframe.setAttribute("src", url);
  document.documentElement.appendChild(iframe);
  iframe.parentNode.removeChild(iframe);
  iframe = null;
}
execute("mytestscheme://callfunction/parameter1/parameter2?parameter3=value");

雖然以上兩種方法都可以達到通訊的目的，但是第1種方法，在某些場景會有問題，比如H5喚起Native分享元件時，同時進行監控打點（通過客戶段來實現打點），結果是執行了兩次改變location.href操作，但實際就會執行一次操作，保險起見，請採用iframe的方案。

這個時候WebView就可以監控到請求，並且做出相應響應：

- (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType {
   NSURL *URL = [request URL]; 
   if ([[URL scheme] isEqualToString:@"mytestscheme"]) {
       // parse the rest of the URL object and execute functions
   } 
}

可能還會有疑問，某些場景需要進行回撥（如H5向Native獲取當前地理位置，拿到地理位置後，在當前頁面顯示），這個如何處理呢？

H5向Native獲取地理位置的請求，通過iframe方法就可以達到，Native把地理傳遞給H5，通過執行js方法並帶上地理位置，這個裡面關鍵點是如何正確進行回撥。有以下兩種方式：

1. 設定iframe src的時候，把執行回撥函式名傳遞給native，src類似為mytestscheme://getLocation/callbackName，最後native執行callName js方法
2. 同樣也是通過設定iframe src，但是src為 mytestscheme:onJsCall:callbackId:getLocation(url根據自己需要定義)，native統一執行和H5約定的回撥函式，如runCallback，並且傳遞引數為callbackId和地理位置，JS內部建立一個物件對映,如下：

(function(){

    var Bridge = {
        callbacks:{},
        callbacksCount : 1,
        getCallbackId:function(callback){
            var hasCallback = callback && typeof callback == "function";
            if(callback.__jsbridgeId__){
                return callback.__jsbridgeId__;
            }
            var callbackId = hasCallback ? this.callbacksCount++ : 0;
            if (hasCallback) {
                this.callbacks[callbackId] = callback;
                callback.__jsbridgeId__ = callbackId;
                return callbackId;
            }   
        },
        ios:function(options){
            var callbackId = this.getCallbackId(opt.callback),
                    path,
                    src;
                    path = [opt.fn].concat(opt.param);
                    src =  "mytestscheme:onJsCall:" + callbackId+ ":" + encodeURIComponent(JSON.stringify(path));
        }
    };

    window.runCallback = function(callbackId,resultArray){
        try {
                var callback = Bridge.callbacks[callbackId];
                if (!callback) return;
                callback.call(this,resultArray);
            } catch(e) {}   
    }
})();

H5和Native通訊原理基本介紹完了，下面再從開發便利性和可維護性，談談如何封裝，安全控制，以及推薦下業界優秀類庫。

關於JSBridge

有移動端開發經驗的同學，對JSBridge應該不會陌生，藉助於它，能夠輕鬆讓H5和Native進行通訊，而且開發很簡單，JSBridge為H5和Native通訊提供了一套完整的解決方案。

JSBridge的流程圖

Bridge特點是把所有通訊相關程式碼進行封裝，包括js和object-c程式碼，同時暴露相關的API給H5進行呼叫，這樣好處可以在一個地方進行維護和升級，注意，這裡有個細節點，這個WebViewJavascript.js可以選擇直接打包在App裡面，或者每個頁面進行引用。

個人比較推薦直接打包App裡面，節省流量，這塊程式碼還是比較穩定的，目前微信採用這樣的方式，手淘則需要在頁面進行引用。

關於安全

考慮到各種域名下H5頁面會出現WebView裡，需考慮到不是所有Native API都可以開放給所有域名下的H5，需要進行一定許可權控制，比較可行的辦法是通過域名進行分級控制，有些API是全部開放，有些API只開放給某些域名的（白名單），白名單放到服務端，實現實時更新。

優秀開源類庫推薦