iOS JS與原生交互

UIWebView

使用 JSCore 
複製代碼

WKWebView

使用userContentController

經過 userContentController 把須要觀察的 JS 執行函數註冊起來。而後經過一個協議方法，將全部註冊過的 JS 函數執行的參數傳遞到此協議方法中。

1、註冊 須要 觀察的 JS 執行函數

   [webView.configuration.userContentController addScriptMessageHandler:self name:@"jsFunc"];

2、在 JS 中調用這個函數並傳遞參數數據

    window.webkit.messageHandlers.jsFunc.postMessage({name : "李四",age : 22});

3、OC 中遵照 WKScriptMessageHandler 協議。

    - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message 

此協議方法裏的 WKScriptMessage 有 name & body 兩個屬性。 name 能夠用來判斷是哪一個 JSFunc 調用了。body 則是 JSFunc 傳遞到 OC 的參數。
複製代碼

使用 WebViewJavaScriptBridge

一、創建 WebViewJavaScriptBridge 和 WebView 之間的關係。

_jsBridge = [WebViewJavascriptBridge bridgeForWebView:_webView];
複製代碼

二、往橋樑中注入 OC 方法 和 JS 函數

2.1 往橋樑中注入 OC 方法。

[_jsBridge registerHandler:@"colorClick" handler:^(id data, WVJBResponseCallback responseCallback) {
       self.navigationController.navigationBar.barTintColor = [UIColor redColor];
        responseCallback(@"顏色修改完畢!");
    }];
複製代碼

OC 調用 JS 的三種狀況。

1、單純的調用 JSFunction，不往 JS 傳遞參數，也不須要 JSFunction 的返回值。

    [_jsBridge callHandler:@"changeBGColor"];

2、調用 JSFunction，並向 JS 傳遞參數，但不須要 JSFunciton 的返回值。

    [_jsBridge callHandler:@"changeBGColor" data:@"把 HTML 的背景顏色改爲橙色!!!!"];

3、調用 JSFunction ，並向 JS 傳遞參數，也須要 JSFunction 的返回值。

    [_jsBridge callHandler:@"changeBGColor" data:@"傳遞給 JS 的參數" responseCallback:^(id responseData) {
        NSLog(@"JS 的返回值: %@",responseData);
    }];
複製代碼

2.2 往橋樑中注入 JS 函數.

WebViewJavascriptBridge.callHandler('colorClick',function(dataFromOC) {
            alert("JS 調用了 OC 註冊的 colorClick 方法");
            document.getElementById("returnValue").value = dataFromOC;
        })
複製代碼

JS 調用 OC 的三種狀況

1、JS 單純的調用 OC 的 block
    
    WebViewJavascriptBridge.callHandler('scanClick');

2、JS 調用 OC 的 block，並傳遞 JS 參數
    
    WebViewJavascriptBridge.callHandler('scanClick',"JS 參數");

3、JS 調用 OC 的 block，傳遞 JS 參數，並接受 OC 的返回值。
   
   WebViewJavascriptBridge.callHandler('scanClick',{data : "這是 JS 傳遞到 OC 的掃描數據"},function(dataFromOC){
            alert("JS 調用了 OC 的掃描方法!");
            document.getElementById("returnValue").value = dataFromOC;
    });
複製代碼

基本就是：

OC 端註冊 OC 的方法，OC 端調用 JS 的函數。
JS 端註冊 JS 的函數，JS 端調用 OC 的方法。
複製代碼