WebViewJavascriptBridge的使用和原理

工作中有用到WebViewJavascriptBridge，正好最近也在学习网页开发就把这个看了一下。首先得说明的是，WebViewJavascriptBridge绝对是一个好东西，简单易用，即使源码也非常容易看懂。（废话，这么多人用，当然好）

关于客户端和网页的交互完全就是靠苹果开放的以下两个方法：

1:stringByEvaluatingJavaScriptFromString：

2:webView:shouldStartLoadWithRequest:navigationType:

第一个方法是客户端向网页中注入JS程序，把js程序以NSString形式写出，执行后会返回js程序返回的内容。第二个方法是网页发生重定向时调用的。

客户端和网页的交互无非是，客户端可以指定调用js的程序；js也可以指定调用客户端的程序。前者相对来说简单点，用上面第一个方法就可以。后者，正常情况下我们办不到，WebViewJavascriptBridge也不办不到。但是，实践证明WebViewJavascriptBridge又是可以直接调用的，出于好奇就看了源码，才在此记录下。

先不急于看其具体工作工程，先看一下其使用。

本着优质代码的本质，WebViewJavascriptBridge使用也是非常简单的。

1，直接把以下五个文件添加到工程中（ARC）：

2，初始化WebViewJavascriptBridge，设置_webView的代理必须在此过程之前，因为在初始化过程中会把webview的代理给替换成Bridge。如果在此过程之后设置_webView的代理那么WebViewJavascriptBridge将失效，因为bridge的webView:shouldStartLoadWithRequest:navigationType:永远调不到了。

-(void)initWebViewBridge{
    [WebViewJavascriptBridge enableLogging];
    
    /*
     * 初始化
     * 1,JS调用[_bridge send] 即JS调用本地_brigde init()中回调block
     *   此时OC不需要额外的代码，只需要在OC的WebViewJavascriptBridge初始化时把回调代码写好即可
     */
    self.bridge = [WebViewJavascriptBridge bridgeForWebView:_webView webViewDelegate:self handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@"init-objc received data : %@",data);
        responseCallback(@"init-Response from Objc");
    }];
    
    /*
     * 2,JS调用[_bridge callHandler] 即js调用oc的_brigde registerHandler中注册的方法回调block
     *   此时OC需要用registerHandler:handler:注册对应JS中的方法，并写好回调代码
     */
    [_bridge registerHandler:@"testJsCallOC" handler:^(id data, WVJBResponseCallback responseCallback) {
        //data是js传过来的值，由oc处理
        NSLog(@"testJsCallOC-objc received data:%@",data);
        
        //OC执行responseCallback来回调JS
        responseCallback(@"testJsCallOC-Response from Objc");
    }];
}

至此，客户端的工作已经基本完成了，JS就可以调用客户端的代码了。_bridge registerHandler可以执行N多次，只要保证handler名称网页端是知道的即可。

3，客户端调用JS的代码如下：

/*
 * 1,[_bridge send] native发送消息给js，调用js的init()中的方法，native不接收回调函数
 */
-(void)bridgeSendMsg{
    NSLog(@"%s",__func__);
    [self.bridge send:@"This message from OC, donnot need callback"];
}

/*
 * 2,[_bridge send: responseCallback:] oc发送消息给js，调用js的init()中的方法，native接收回调
 */
-(void)bridgeSendMsgAndResponse{
    NSLog(@"%s",__func__);
    [_bridge send:@"This message from OC, need callback" responseCallback:^(id responseData) {
        //当js执行OC的回调时
        NSLog(@"js response oc with data:%@",responseData);
    }];
}

/*
 * 3,[_bridge callHandler] oc调用js的registerHandler()方法 无数据，无回调
 */
-(void)bridgeCallJsMethod{
    [_bridge callHandler:@"testOCCallJS"];
}

/*
 * 4,[_bridge callHandler: data:] oc调用js的registerHandler()方法 有数据，无回调
 */
-(void)bridgeCallJsMethodWithData{
    id data = @{@"OCcallingJS":@"Hi,this is from oc"};
    [_bridge callHandler:@"testOCCallJS" data:data];
}

/*
 * 5,[_bridge callHandler:data:responseCallback:] oc调用js的registerHandler()方法 有数据，有回调
 */
-(void)bridgeCallJsMethodWithDataAndResponse{
    id data = @{@"OCcallingJS":@"Hi,this is from oc"};
    [_bridge callHandler:@"testOCCallJS" data:data responseCallback:^(id responseData) {
        //当js执行OC的回调时
        NSLog(@"js->testOCCallJS response oc with data:%@",responseData);
    }];
    
}

通过上面5个方法，客户端就可以任意调用网页中的方法，前提是网页中有该方法。