最近做的項目中涉及到很多的報表的展示頁面是用H5做的，H5的強大也讓我感到是時候要學學H5和JS了。感慨歸感慨，由于原生和H5共同的存在項目中，必然涉及到原生和H5的交互。

無意中在某個帖子中發現了一個叫WebViewJavascriptBridge的第三方，然后查找資料總結了一下它的用法如下：

HTML文件中寫入如下代碼：

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)    }        setupWebViewJavascriptBridge(function(bridge) {                                var uniqueId = 1                                function log(message, data) {                                var log = document.getElementById('log')                                var el = document.createElement('div')                                el.className = 'logLine'                                el.innerHTML = uniqueId++ + '. ' + message + ':

' + JSON.stringify(data)                                if (log.children.length) { log.insertBefore(el, log.children[0]) }                                else { log.appendChild(el) }                                }                                                                  bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {                                                        log('ObjC called testJavascriptHandler with', data)                                                        var responseData = { 'Javascript Says':'Right back atcha!' }                                                        log('JS responding with', responseData)                                                        responseCallback(responseData)                                                        })                                                                  document.body.appendChild(document.createElement('br'))                                                                  var callbackButton = document.getElementById('buttons').appendChild(document.createElement('button'))                                callbackButton.innerHTML = 'Fire testObjcCallback'                                callbackButton.onclick = function(e) {                                e.preventDefault()                                log('JS calling handler "testObjcCallback"')                                bridge.callHandler('testObjcCallback', {'foo': 'bar'}, function(response) {                                                    log('JS got response', response)                                                    })                                }                                })

native的用法，首先引入WebViewJavascriptBridge,然后具體用法如下：

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    [self.view setBackgroundColor:[UIColor whiteColor]];
    [self addUI];
    [self loadHtmlFile];
}
- (void)viewWillAppear:(BOOL)animated{
    if (_bridge) {
        return;
    }
    [WebViewJavascriptBridge enableLogging];
    _bridge=[WebViewJavascriptBridge bridgeForWebView:self.webView];
    
    [_bridge registerHandler:@"testObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@"testOcCallBack called:%@",data);
        responseCallback(@"response from testOCCallBack");
    }];
    
    [_bridge callHandler:@"testJavascriptHandler" data:@{@"foo":@"before ready"}];
    
    
}
-(void)addUI{
    self.webView.frame=CGRectMake(0, 0,[UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height*0.7);
    self.commitBtn.frame=CGRectMake(0, CGRectGetMaxY(_webView.frame)+50, [UIScreen mainScreen].bounds.size.width, 50);
    [self.view addSubview:self.webView];
    [self.view addSubview:self.commitBtn];
    
   
   
}

- (UIWebView *)webView{
    if (!_webView) {
        _webView=[[UIWebView alloc]init];
    }
    return _webView;
}
- (UIButton *)commitBtn{
    if (!_commitBtn) {
        _commitBtn=[UIButton buttonWithType:UIButtonTypeSystem];
        [_commitBtn setTitle:@"commit" forState:UIControlStateNormal];
        [_commitBtn addTarget:self action:@selector(commitBtnAction:) forControlEvents:UIControlEventTouchUpInside];
    }
    return _commitBtn;
}
-(void)loadHtmlFile{
    NSString* htmlPath = [[NSBundle mainBundle] pathForResource:@"testApp" ofType:@"html"];
    NSString* appHtml = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];
    NSURL *baseURL = [NSURL fileURLWithPath:htmlPath];
    [self.webView loadHTMLString:appHtml baseURL:baseURL];
    
}

#pragma mark -commit Action
-(void)commitBtnAction:(UIButton *)btn{
    id data=@{@"greetingFromObjc": @" hi i'm zhangxinxin's js !"};
    [_bridge callHandler:@"testJavascriptHandler" data:data responseCallback:^(id responseData) {
        NSLog(@"testJavascriptHandler responded : %@",responseData);
    }];
}

由此就可以實現webView和網頁js的交互了。