iOS JS交互 WebViewJSBridge

使用

pod ‘WebViewJavaScriptBridge’

目录结构

WebViewJavaScriptBridgeBase：bridge的核心类，用来初始化以及消息的处理；

WKWebViewJavaScriptBridge：判断WkWebView的类型，并通过不同的类型进行分发。针对WkWebView和WkWebView做的一层封装，主要从来执行JS代码，以及实现WkWebView和WkWebView的代理方法，并通过拦截URL来通知WebViewJavaScriptBridgeBase做的相应操作

WebViewJavaScriptBridge：判断WebView的类型，并通过不同的类型进行分发。针对UIWebView和WebView做的一层封装，主要从来执行JS代码，以及实现UIWebView和WebView的代理方法，并通过拦截URL来通知WebViewJavaScriptBridgeBase做的相应操作；
WebViewJavaScriptBridge_JS：里面主要写了一些JS的方法，JS端与Native”互动“的JS端的方法

主要流程

初始化

Native端的初始化

_bridge = [WKWebViewJavascriptBridge bridgeForWebView:_webView];
[_bridge setWebViewDelegate:self];
[self.bridge disableJavscriptAlertBoxSafetyTimeout];

web端的初始化

当我们通过loadRequest加载URL之后，网页一加载就会执行网页JS中的bridge的初始化方法setupWebViewJavascriptBridge函数

function setupWebViewJavascriptBridge(callback) {
    if (window.WebViewJavascriptBridge) { 
        return callback(WebViewJavascriptBridge);
    }
    if (window.WVJBCallbacks) { 
        return window.WVJBCallbacks.push(callback); 
    }
    window.WVJBCallbacks = [callback];
    var WVJBIframe = document.createElement('iframe');
    WVJBIframe.style.display = 'none';
    WVJBIframe.src = 'https://__bridge_loaded__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function() {       document.documentElement.removeChild(WVJBIframe) }, 0)
}

JS调用Native

JS中调用callHandler()方法，发消息data给原生

bridge.callHandler('handlerName',data, function(response) {

})

这就需要Native中向JS注册一个方法, js调用oc，data:传递的数据：

 [_bridge registerHandler:@"handlerName" handler:^(id data, WVJBResponseCallback responseCallback) {
        responseCallback(@"Response from handlerName");
  }];

Native调用JS

Native 中调用callHandler:data:responseCallback方法，发消息data给js

[_bridge callHandler:@"handlerName" data:data responseCallback:^(id response) {
        NSLog(@"handlerName responded: %@", response);
 }];

这就需要JS事先注册一个方法, oc调用jk，data:传递的数据：

bridge.registerHandler('handlerName', function(data, responseCallback) {
    var responseData = { 'Javascript Says':'Right back atcha!'
    responseCallback(responseData)
})