iOS下 JS 与 OC 互相调用(五) - UIWebView+WebViewJavascriptBridge

序言

WebViewJavascriptBridge 是一个有点年代的 JS 与 OC 交互的库，使用该库的应用不少，目前这个库有近12000 Star。最新的版本要兼容 WKWebView，所以新增了几个类。但是总体类文件个数不是很多，仔细阅读还是很容易理解的。

V6.0.3.png

WebViewJavascriptBridge使用讲解

由于WebViewJavascriptBridge在UIWebView和WKWebView下的使用有些许差别，所以就分成两篇文章来讲解WebViewJavascriptBridge。

本文介绍的是在UIWebView中使用WebViewJavascriptBridge来达到JS与OC互相调用的目的。接下来，我就从零开始边搭建工程边讲解WebViewJavascriptBridge。

先看效果图

JS_OC_WebViewJavascriptBridge.gif

第一步，使用Pods 将WebViewJavascriptBridge库添加到工程中。

如何使用 Pods将WebViewJavascriptBridge库添加到工程中省略，其 github 的地址是WebViewJavascriptBridge,我使用的是V6.0.3版本

第二步，创建UIWebView和WebViewJavascriptBridge示例

#import <WebViewJavascriptBridge.h>

@interface WebBridgeViewController ()
/** webView */
@property(nonatomic, strong)UIWebView *webView;
/** bridge */
@property(nonatomic, strong)WebViewJavascriptBridge *webViewBridge;

@end

2.1 创建UIWebVIew

- (void)drawUI {
    self.webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
    [self.view addSubview:self.webView];
    
    NSURL *htmlURL = [[NSBundle mainBundle] URLForResource:@"index.html" withExtension:nil];
    NSURLRequest *request = [NSURLRequest requestWithURL:htmlURL];
    
    // UIWebView 滚动的比较慢，这里设置为正常速度
    self.webView.scrollView.decelerationRate = UIScrollViewDecelerationRateNormal;
    [self.webView loadRequest:request];
}

这里不需要为UIWebViews设置代理，因为在创建WebViewJavascriptBridge的时候，UIWebView的代理已经被赋值给了WebViewJavascriptBridge。

2.2 创建WebViewJavascriptBridge
因为WebViewJavascriptBridge实例，在控制器中多个地方用到，因此最好定义一个property或者实例变量存起来。

// WebViewJavascriptBridge
self.webViewBridge = [WebViewJavascriptBridge bridgeForWebView:self.webView];
[self.webViewBridge setWebViewDelegate:self];

然后看看bridgeForWebView:方法是如何实现的

+ (instancetype)bridgeForWebView:(id)webView {
    return [self bridge:webView];
}
+ (instancetype)bridge:(id)webView {
#if defined supportsWKWebView
    if ([webView isKindOfClass:[WKWebView class]]) {
        return (WebViewJavascriptBridge*) [WKWebViewJavascriptBridge bridgeForWebView:webView];
    }
#endif
    if ([webView isKindOfClass:[WVJB_WEBVIEW_TYPE class]]) {
        WebViewJavascriptBridge* bridge = [[self alloc] init];
        [bridge _platformSpecificSetup:webView];
        return bridge;
    }
    [NSException raise:@"BadWebViewType" format:@"Unknown web view type."];
    return nil;
}

其实{-bridgeForWebView }内部先去判断当前使用的是 WKWebView 还是 UIWebView，然后再分别初始化了一个WebViewJavascriptBridge对象，并为其实例变量_webView 和 _base赋值。

第三步，注册js 要调用的Native 功能。

- (void)registerNativeFunctions {
    [self registShareFunction];
    
    [self registLocationFunction];
    
    [self registPayFunction];
}

- (void)registShareFunction {
    [self.webViewBridge registerHandler:@"shareClick" handler:^(id data, WVJBResponseCallback responseCallback) {
        // data 的类型与 JS中传的参数有关
        NSDictionary *tempDic = data;
        // 在这里执行分享的操作
        NSString *title = [tempDic objectForKey:@"title"];
        NSString *content = [tempDic objectForKey:@"content"];
        NSString *url = [tempDic objectForKey:@"url"];
        NSLog(@"JS 传递给 OC 的参数:%@",[NSString stringWithFormat:@"分享成功:%@,%@,%@",title,content,url]);
        
        // 将分享的结果返回到JS中
        NSString *result = [NSString stringWithFormat:@"分享成功:%@,%@,%@",title,content,url];
        responseCallback(result);
    }];
}

- (void)registerHandler:(NSString *)handlerName handler:(WVJBHandler)handler 该方法由两个参数：第一个参数handlerName，是对这个功能起的一个别名。第二个参数handler，是一个block，也就是 Native 实现的功能。JS 要调用的 Native 实现其实就是 block 内{}内的代码功能。

为了便于维护，我们可以将JS要调用的Native方法都集中到一起，然后单个功能再封装一个方法。

第四步，完成 HTML 必要的 JS 代码

HTML 中有一个必须要添加的JS 方法，然后需要自动调用一次该方法。该方法是：

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 = 'wvjbscheme://__BRIDGE_LOADED__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}

上面这个方法的参数是一个function，这个方法的作用主要是在第一次加载HTML的时候起作用，目的是加载一次wvjbscheme://__BRIDGE_LOADED__，来触发往HTML中注入一些已经写好的JS方法。

看看上面的方法与下面这个是不是很相似：

function loadURL(url) {
    var iFrame;
    iFrame = document.createElement("iframe");
    iFrame.setAttribute("src", url);
    iFrame.setAttribute("style", "display:none;");
    iFrame.setAttribute("height", "0px");
    iFrame.setAttribute("width", "0px");
    iFrame.setAttribute("frameborder", "0");
    document.body.appendChild(iFrame);
    // 发起请求后这个iFrame就没用了，所以把它从dom上移除掉
    iFrame.parentNode.removeChild(iFrame);
    iFrame = null;
}

添加完setupWebViewJavascriptBridge方法，需要在JS中主动调用一次该方法：

setupWebViewJavascriptBridge(function(bridge) {
     bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
        alert('JS方法被调用:'+data);
        responseCallback('js执行过了');
     })
})

Native 需要调用的 JS 功能，也是需要先注册，然后再执行的。如果Native 需要调用的JS 功能有多个，那么这些功能都要在这里先注册，注册之后才能够被Native 调用。
接下来需要好好分析一下JS 中这个方法的作用了。

以下是分析的重点

首先调用setupWebViewJavascriptBridge，第一次执行的时候，由于window.WebViewJavascriptBridge和window.WVJBCallbacks都不存在，所以会继续往下执行，将参数callback（它是一个function）装进数组赋值给window.WVJBCallbacks。

js 支持动态添加属性并赋值，这里window.WVJBCallbacks = [callback];就是动态添加属性，并赋值。另外js中的全局变量都可以使用window.xxxx来调用;动态添加的属性也可以不加window.，直接使用。

WebViewJavascriptBridge 帮助JS调用Native的url 有两种，一种是wvjbscheme://__BRIDGE_LOADED__；而另一种是wvjbscheme://__WVJB_QUEUE_MESSAGE__。前者只有在调用setupWebViewJavascriptBridge的时候执行一次，一般来说这个url 如果没有页面应该只会执行一次。第二种url所有js调用Native 功能时，都会使用到。

3.在拦截到自定义的url 时，WebViewJavascriptBridge分了三种情况。
3.1 如果是wvjbscheme://__BRIDGE_LOADED__,就往HMTL 中注入已经写好的js，这个js 在WebViewJavascriptBridge_JS中；
3.2 如果是wvjbscheme://__WVJB_QUEUE_MESSAGE__,那就利用stringByEvaluatingJavaScriptFromString，取回调用js中callHandler传进去的参数。
然后再从WebViewJavascriptBridge之前保存的Native 方法对应的block，调用对应的block。

第五步，调用 Native 功能

利用之前注入的JS方法callHandler 就可以调用Native 功能了。
示例代码如下：

function shareClick() {
    var params = {'title':'测试分享的标题','content':'测试分享的内容','url':'http://www.baidu.com'};
    WebViewJavascriptBridge.callHandler('shareClick',params,function(response) {
         alert(response);
        document.getElementById("returnValue").value = response;
     });
}

这里callHandler前的WebViewJavascriptBridge,其实就是上一步注入到JS中的代码中，动态创建属性，动态赋值的属性。如下代码片段可以在WebViewJavascriptBridge_JS中找到。

window.WebViewJavascriptBridge = {
  registerHandler: registerHandler,
  callHandler: callHandler,
  disableJavscriptAlertBoxSafetyTimeout: disableJavscriptAlertBoxSafetyTimeout,
  _fetchQueue: _fetchQueue,
  _handleMessageFromObjC: _handleMessageFromObjC
 };

而callHandler 内部调用了另一个js function _doSend,而_doSend内部其实，就是把handlerName和参数data，再加上callbackId 装成键值对，然后保存到数组sendMessageQueue，同时加载一次wvjbscheme://__WVJB_QUEUE_MESSAGE__。
到此利用WebViewJavascriptBridge实现JS 调用iOS Native 就完成了。

第六步，Native 调用 JS 功能

Native 调用js 的功能，也需要先在js 中为要调用的功能注册一个别名。

6.1 js 注册Native 要调用的功能

setupWebViewJavascriptBridge(function(bridge) {
     bridge.registerHandler('testJSFunction', function(data, responseCallback) {
        alert('JS方法被调用:'+data);
        responseCallback('js执行过了');
     })
    // 注册其他的功能
    //bridge.regsiterHandler.....
})

6.2 Native 调用功能的别名handlerName

//    // 如果不需要参数，不需要回调，使用这个
//    [_webViewBridge callHandler:@"testJSFunction"];
//    // 如果需要参数，不需要回调，使用这个
//    [_webViewBridge callHandler:@"testJSFunction" data:@"一个字符串"];
    // 如果既需要参数，又需要回调，使用这个
    [_webViewBridge callHandler:@"testJSFunction" data:@"一个字符串" responseCallback:^(id responseData) {
        NSLog(@"调用完JS后的回调：%@",responseData);
    }];

而callHandler 方法又是如何实现调用js 方法的呢？
callHandler 内部是将传递给js 的参数、handlerName、callbackId组合成字典，然后把字典转换成字符串，将转换后的字符串以参数的形式，通过stringByEvaluatingJavaScriptFromString传递给js ，js 中将传递过来的字符串转成json ，然后通过handlerName 获取对应的function执行。
关键的几个代码段：

// 这里是Native 调用js ，把参数转换为字符串，执行js 中的_handleMessageFromObjC方法。
- (void)_dispatchMessage:(WVJBMessage*)message {
    NSString *messageJSON = [self _serializeMessage:message pretty:NO];
    [self _log:@"SEND" json:messageJSON];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\\" withString:@"\\\\"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\"" withString:@"\\\""];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\'" withString:@"\\\'"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\n" withString:@"\\n"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\r" withString:@"\\r"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\f" withString:@"\\f"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\u2028" withString:@"\\u2028"];
    messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@"\u2029" withString:@"\\u2029"];
    
    NSString* javascriptCommand = [NSString stringWithFormat:@"WebViewJavascriptBridge._handleMessageFromObjC('%@');", messageJSON];
    if ([[NSThread currentThread] isMainThread]) {
        [self _evaluateJavascript:javascriptCommand];

    } else {
        dispatch_sync(dispatch_get_main_queue(), ^{
            [self _evaluateJavascript:javascriptCommand];
        });
    }
}

下面这里是找到handlerName 对应的function，并执行function。

var handler = messageHandlers[message.handlerName];
    if (!handler) {
     console.log("WebViewJavascriptBridge: WARNING: no handler for message from ObjC:", message);
    } else {
     handler(message.data, responseCallback);
    }
}

到这里利用WebViewJavascriptBridge 实现Native 调用js 的功能就完成了。

注意：JS 有动态参数的特性，调用js 的方法，可以传0个参数，1个参数，N个参数都可以。

例如，我们在js中定义一个test()方法，我们可以调用test()，来执行这个方法；如果有参数要传进来，也可以调用test(xxx)；如果有多个参数，那么就用test(xxx,xxx)。当然如果我们定义的参数是test(a,b,c)，也可以少传参数，或者不传参数调用test()。

总结

利用WebViewJavascriptBridge来实现JS与OC的交互的优点：

获取参数时，更方便一些，如果参数中有一些特殊符号或者url带参数，能够很好的解析。

也有一些缺点：

做一次交互，需要执行的js 与原生的交互步骤较多，至少有两次。
需要花较多的时间，理解WebViewJavascriptBridge的原理和使用步骤。

本文主要参考iOS下JS与OC互相调用（五）--UIWebView + WebViewJavascriptBridge，该作者整理的非常详细，说的也很到位，非常感谢该作者。

项目连接地址 - UIWeb_WebViewJavascriptBridge

生活源于创造，技术源于分享，愿生活越来越美好。

最后编辑于：2018.08.18 12:16:01

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 159,015评论 4赞 362
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,262评论 1赞 292
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 108,727评论 0赞 243
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 43,986评论 0赞 205
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,363评论 3赞 287
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,610评论 1赞 219
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,871评论 2赞 312
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,582评论 0赞 198
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,297评论 1赞 242
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,551评论 2赞 246
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,053评论 1赞 260
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,385评论 2赞 253
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,035评论 3赞 236
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,079评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,841评论 0赞 195
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,648评论 2赞 274
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,550评论 2赞 270