摘要

在做h5应用的时，有时有些功能js并不能实现的特别完美。比如下载进度条或上传文件进度等。如果能调用ios或者android的方法，实现进度，以及文件上传或者下载列表更好一些。如果使用第三方的js插件。又要考虑到ios和android的版本问题，支持上并不是特别完美。

WebViewJavascriptBridge

WebViewJavascriptBridge是一个开源的ios项目，通过桥的方式obc调用js或者js调用obc方法。项目地址：。

用法

1.Import the header file and declare an ivar property:

#import "WebViewJavascriptBridge.h"....@property WebViewJavascriptBridge* bridge;

2.Instantiate WebViewJavascriptBridge with a UIWebView (iOS) or WebView (OSX):

self.bridge = [WebViewJavascriptBridge bridgeForWebView:webView];

3.Register a handler in ObjC, and call a JS handler:

[self.bridge registerHandler:@"ObjC Echo" handler:^(id data, WVJBResponseCallback responseCallback) {    NSLog(@"ObjC Echo called with: %@", data);    responseCallback(data);}];[self.bridge callHandler:@"JS Echo" responseCallback:^(id responseData) {    NSLog(@"ObjC received response: %@", responseData);}];

4.Copy and paste setupWebViewJavascriptBridge into your 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)}

5.Finally, call setupWebViewJavascriptBridge and then use the bridge to register handlers and call ObjC handlers:

setupWebViewJavascriptBridge(function(bridge) {    /* Initialize your app here */    bridge.registerHandler('JS Echo', function(data, responseCallback) {        console.log("JS Echo called with:", data)        responseCallback(data)    })    bridge.callHandler('ObjC Echo', {'key':'value'}, function responseCallback(responseData) {        console.log("JS received response:", responseData)    })})

通过第4和5步骤，js就可以调用objc的方法了。