iOS WebViewJavascriptBridge使用

WKWEbView、UIWebView都适用
WebViewJavascriptBridge github地址

#import "WebViewJavascriptBridge.h"

@property WebViewJavascriptBridge* bridge;

if (_bridge) { return; }
    [WebViewJavascriptBridge enableLogging];    
    _bridge = [WebViewJavascriptBridge bridgeForWebView:webView];
    [_bridge setWebViewDelegate:self];

JS2OC

/*
     含义：JS调用OC
     @param registerHandler 要注册的事件名称(比如这里我们为loginAction)
     @param handel 回调block函数 当后台触发这个事件的时候会执行block里面的代码
     */
    [_bridge registerHandler:@"loginAction" handler:^(id data, WVJBResponseCallback responseCallback) {
        // data js页面传过来的参数  假设这里是用户名和姓名，字典格式
        NSLog(@"JS调用OC，并传值过来");
        
        // 利用data参数处理自己的逻辑
        NSDictionary *dict = (NSDictionary *)data;
        NSString *str = [NSString stringWithFormat:@"用户名：%@  姓名：%@",dict[@"userId"],dict[@"name"]];
        
        
        // responseCallback 给后台的回复
        responseCallback(@"报告，oc已收到js的请求");
    }];

OC2JS

/*
     含义：OC调用JS
     @param callHandler 商定的事件名称,用来调用网页里面相应的事件实现
     @param data id类型,相当于我们函数中的参数,向网页传递函数执行需要的参数
     注意，这里callHandler分3种，根据需不需要传参数和需不需要后台返回执行结果来决定用哪个
     */
    
    //[_bridge callHandler:@"registerAction" data:@"我是oc请求js的参数"];
    [_bridge callHandler:@"registerAction" data:@"uid:123 pwd:123" responseCallback:^(id responseData) {
        NSLog(@"oc请求js后接受的回调结果：%@",responseData);
    }];

加载本地html

- (void)loadExamplePage:(UIWebView*)webView {
    NSString* htmlPath = [[NSBundle mainBundle] pathForResource:@"ExampleApp" ofType:@"html"];
    NSString* appHtml = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];
    NSURL *baseURL = [NSURL fileURLWithPath:htmlPath];
    [webView loadHTMLString:appHtml baseURL:baseURL];
}

在网页里复制这个

<!-- 申明交互 -->
    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)
    }

<!-- 处理交互  方法名要和ios内定义的对应-->
    setupWebViewJavascriptBridge(function(bridge) {

        <!--处理 oc 调用 js -->
        bridge.registerHandler('registerAction', function(data, responseCallback) {
            //处理oc给的传参
            alert('oc请求js  传值参数是：'+data)
                               
            var responseData = { 'result':'handle success' }
            //处理完，回调传值给oc
            responseCallback(responseData)
        })


        var callbackButton = document.getElementById('buttons').appendChild(document.createElement('button'))
        callbackButton.innerHTML = '点击我，我会调用oc的方法'
        callbackButton.onclick = function(e) {
            e.preventDefault()
                                 
            <!--处理 js 调用 oc -->
            bridge.callHandler('loginAction', {'userId':'zhangsan','name': '章三'}, function(response) {
                 //处理oc过来的回调
                 alert('收到oc过来的回调:'+response)
            })
        }