前言

好久没有维护简书了...大家的提问也没来得及回复,深感抱歉....最近在忙OC->JS交互的工作,抽空整理了一篇简书跟大家分享一下.

废话不多说,直接上代码!

OC端

导入 #import "WebViewJavascriptBridge.h"

-(void)addRoute:(UIWebView*)webView{
    //OC --> JS交互
    // 开启日志
    [WebViewJavascriptBridge enableLogging];

    // 给哪个webview建立JS与OjbC的沟通桥梁
    self.bridge = [WebViewJavascriptBridge bridgeForWebView:webView];
    [self.bridge setWebViewDelegate:self];

     /**
    JS调用OC:
    实质:OC注册方法给JS调用
    @param data             JS所传的参数
    @param registerHandler  约定的方法名(此处约定为getOC)
    @param responseCallback OC端通过responseCallback回调JS端,JS就可以得到所需要的数据
    */

    [self.bridge registerHandler:@"getOC" handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@"--------------JS调用getOC->JS回调的数据: %@", data);
        NSError *parseError = nil;
        NSData *jsonData = [NSJSONSerialization dataWithJSONObject:data options:NSJSONWritingPrettyPrinted error:&parseError];
        NSString *message = [[NSString alloc] initWithData:jsonData encoding:NSUTF8StringEncoding];

        [[MyAlertView alertViewWithTitle:@"OC的弹框-JS调用getOC" message:message onBtnClicked:^(int btnIndex) {

        } cancelButtonTitle:@"确定" otherButtonTitles:nil] show];

        if (responseCallback) {
            // 反馈给JS
            responseCallback(@{@"blogName": @"楠哥"});
        }
    }];

    /**
     OC调用JS:
     @param callHandler      约定的方法名(此处约定为getJS)
     @param data             OC所传的参数
     @param responseData     JS回调数据
     */
    [self.bridge callHandler:@"getJS" data:@{@"name": @"楠哥最帅"} responseCallback:^(id responseData) {
        NSError *parseError = nil;
        NSData *jsonData = [NSJSONSerialization dataWithJSONObject:responseData options:NSJSONWritingPrettyPrinted error:&parseError];
        NSString *message = [[NSString alloc] initWithData:jsonData encoding:NSUTF8StringEncoding];

        [[MyAlertView alertViewWithTitle:@"OC的弹框-OC调用getJS" message:message onBtnClicked:^(int btnIndex) {

        } cancelButtonTitle:@"确定" otherButtonTitles:nil] show];
        NSLog(@"-------------从JS接收的数据: %@", responseData);
    }];
}

JS端


<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <style type='text/css'>
        html { color:#000; }
        h1 { font-size:24px; margin-top:24px; }
        #id,#ids{ margin:0 3px 10px; font:15px/50px 微软雅黑;height: 50px;text-align: center }
        #ids{background-color: #000;color: #fff;}
        #id{color: #000;}
    </style>
</head>

<body>
<h1>IOS与H5交互</h1>

<div id='id'></div>
<div id='ids'>JS调OC</div>
<script>


    /*这段代码是固定的，必须要放到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)
    }

    /*与OC交互的所有JS方法都要放在此处注册，才能调用通过JS调用OC或者让OC调用这里的JS*/
    setupWebViewJavascriptBridge(function(bridge) {
        /*OC调用JS*/
        bridge.registerHandler('getJS', function (data, responseCallback) {
            document.getElementById('id').innerHTML = 'OC调JS得到' + JSON.stringify(data)
            responseCallback({'来自JS的数据': 'getJS'})
        })


        /*JS调OC*/
        document.getElementById('ids').onclick = function () {
            bridge.callHandler('getOC',{'来自JS的数据': 'getOC'}, function(responseData) {
                alert('来自OC的数据' + JSON.stringify(responseData))
            })
        }
    })

</script>


</body>
</html>