背景
某些情况下，需要调用js的一些代码来执行一些操作，并且将处理结果回传到OC。
概述
为了执行一段包含外部引用的js，需要使用UIWebView，通过fileURL去加载一个js或者HTML页面，为了方便的在两个语言之间通信，需要借助一个第三方框架WebViewJavascriptBridge，它可以实现跨语言的请求与回调。
实现
本文讨论的是，从OC调用WebView加载的js的某个方法来处理数据，并且回调处理结果。这里有两个关键点，一是加载的js文件能够处理外部引用，二是OC可以调用js并且回传结果。
加载包含外部引用的js
使用webView的loadRequest:方法，加载一个本地的HTML文件可以实现执行包含外部引用的js。为了证明可以引入外部js，我们引入一个jquery，并且在document.ready中执行后续操作，具体步骤如下。
1.将html与js加入到bundle中
将文件加入到bundle
其中index.html中包含的是要执行的js，内容如下:
setupWebViewJavascriptBridge是JSBridge的内容，用于设置桥接。
<body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
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)
}
$(document).ready(function(){
alert('document ready');
setupWebViewJavascriptBridge(function(bridge){
bridge.registerHandler('js_handler', function(data, callback) {
alert('JS Receive: ' + data);
callback('<data after calculate>');
})
});
});
</script>
</body>
2.在控制器中创建一个webView，并且加载index.html
@interface ViewController () <UIWebViewDelegate>
@property (nonatomic, strong) UIWebView *webView;
@property (nonatomic, strong) WebViewJavascriptBridge *bridge;
@end
- (void)viewDidLoad {
[super viewDidLoad];
UIWebView *wb = [[UIWebView alloc] initWithFrame:CGRectZero];
// 设置代理，可以通过拦截请求的方式回调
wb.delegate = self;
self.webView = wb;
// 通过request方式加载本地文件
NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"index.html" ofType:nil]]];
[wb loadRequest:request];
// 通过JSBridge实现调用js方法
self.bridge = [WebViewJavascriptBridge bridgeForWebView:wb];
// 调用js代码中注册的名为js_handler的方法，并且传递参数data，当js中处理完后，调用callback会回调到responseCallback:并且传递responseData回来
[self.bridge callHandler:@"js_handler" data:@"<data from objc>" responseCallback:^(id responseData) {
NSLog(@"收到来自js的回调数据 %@", responseData);
}];
}
3.分析调用过程
首先看一下index.html中的js代码
<body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
// 配置桥接的代码，来自github的WebViewJavascriptBridge给出的示例
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)
}
// 使用document.ready证明可以处理外部引用
$(document).ready(function(){
alert('document ready');
// 调用上面的方法配置桥接，并且定义一个名为js_handler的方法，接收OC传递来的data，并且通过callback回调。
setupWebViewJavascriptBridge(function(bridge){
bridge.registerHandler('js_handler', function(data, callback) {
alert('JS Receive: ' + data);
callback('<data after calculate>');
})
});
});
</script>
</body>
在代码开始运行后，首先webView加载了js，js通过alert显示document ready，然后完成桥接的配置。紧接着运行OC中配置桥接的代码，并调用js中的js_handler，传递数据，js_handler收到数据后，通过alert显示收到的数据data，并且将处理后的数据经过callback回调到OC的responseCallback这个block，这时候在控制台可以看到收到js回调的log。
4.另一种js回调到OC的方式
上面的代码设置了webView的代理为当前控制器，webView在每次加载一个请求时都会通过代理询问是否加载该请求，只要在这里拦截特定请求，即可实现通信。
我们可以在js中需要回传数据的时候通过window.location.href="<url>"实现一个请求，注意这里不要直接使用ajax请求，否则会产生跨域的问题。
通过url中带数据的方式即可实现js到OC的通信，为了区分传统的请求，我们可以以app://开头，例如app://result=0x28，代表处理结果为0x28，只需要在拦截时判断是否是app协议，并且通过正则等手段取出url中的参数即可，具体的代理方法如下。
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
NSString *urlStr = request.URL.absoluteString;
// 这里把app协议的请求拦截下来处理
if ([urlStr hasPrefix:@"app://"]) {
NSString *content = [urlStr substringFromIndex:6];
NSLog(@"%@", content);
return NO;
}
return YES;
}
总结
实现js与OC通信的难点主要是OC对js方法的调用，使用WebViewJavascriptBridge可以简单的实现这一功能，该框架可以完美的实现js和OC的相互调用与回调。
网友评论