JS和OC的交互这是个永恒话题，使用场景也是越来越多，如今一些reactnative、vue框架等，都是在重点结合原生与H5的混合使用。
那么，如何快捷方便的使用两者交互是一个很重要的关键点。
1、传统上的交互使用：
- OC调用JS：
webView对象通过调用stringByEvaluatingJavaScriptFromString这个方法执行一段JS代码实现交互。
如：
self.title = [self.webView stringByEvaluatingJavaScriptFromString:@"document.title"];
这种方式对一些简单场景比较适用，也很方便。
- JS调用OC：
webView拦截url链接，获取内容，再处理逻辑
如：
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;
实现以上webView的代理方法，当webView每次开始加载URL时会进入这个方法，我们便可以在这个方法实现JS调用OC。
举例如下：
JS代码
OC代码
（图片来源于网络）
这种JS调用OC的方法的缺点十分明显，需要繁琐地解释字符串得到相应的方法名和传值，且调用的方法也不能传递返回值；但优点是：不需要等待页面加载完才触发，当相应的代码被运行就能调用OC的方法（相比 JavaScriptCore而言，下文会讲到）
2、苹果推荐的框架--JavaScriptCore
JavaScriptCore是苹果在iOS7时新推出用以实现JS和iOS代码交互的框架，十分简单高效。
使用这种，需要导入JavaScriptCore.framework框架。
oc调用js时：
-(void)webViewDidFinishLoad:(UIWebView *)webView
{
//网页加载完成调用此方法
//首先创建JSContext 对象（此处通过当前webView的键获取到jscontext）
JSContext *context=[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
NSString *alertJS=@"alert('test js OC')"; //准备执行的js代码
[context evaluateScript:alertJS];//通过oc方法调用js的alert
} 这句话的意思，是在webview加载结束，注入一段js代码，和传统方式有异曲同工之处。
js调用oc时：
这个是这个框架的优势重点。这里基本解决了两者的调用，并且能够实现，调用之后的回调处理。
但！！！这里有个坑，就是oc调用js，必须是html加载完成之后才可以。
3、优秀的第三方框架--WebViewJavascriptBridge
到了这里，就是本文的重点了，介绍一下WebViewJavascriptBridge
WebViewJavascriptBridge同时支持UIWeView和WKWebView，无论是JS调用OC还是OC调用JS，都可以正常传值和返回值；而且在页面加载时只要JS代码被运行就可以进行交互，上面遇到的缺点和坑在这里都被掩埋的，所以是现在处理交互的主流做法。
网上我找的资料，很多也是从官方demo衍生出来的，本文也不例外，不同的是，我会在代码里，详细的添加各种注释，保证大家能快速的理解。
使用介绍：
1、准备文件
2、js代码截取片段
解释：这段代码是必须的，申明交互直接拷贝即可，处理交互部分，需要改动，关键就是和oc端协商的方法名，以及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 = '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)
})
}
})
3、OC代码
- pod导入框架
pod 'WebViewJavascriptBridge'- import头部
#import "WebViewJavascriptBridge.h"- viewDidload
//初始化 WebViewJavascriptBridge
if (_bridge) { return; }
[WebViewJavascriptBridge enableLogging];
_bridge = [WebViewJavascriptBridge bridgeForWebView:webView];
[_bridge setWebViewDelegate:self];
//请求加载html，注意：这里h5加载完，会自动执行一个调用oc的方法
[self loadExamplePage:webView];
//申明js调用oc方法的处理事件，这里写了后，h5那边只要请求了，oc内部就会响应
[self JS2OC];
//模拟操作：2秒后，oc会调用js的方法
//注意：这里厉害的是，我们不需要等待html加载完成，就能处理oc的请求事件；此外，webview的request 也可以在这个请求后面执行（可以把上面的[self loadExamplePage:webView]放到[self OC2JS]后面执行，结果是一样的）
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[self OC2JS];
});- JS 调用 OC
-(void)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"]];
[self renderButtons:str];
// responseCallback 给js的回复
responseCallback(@"报告，oc已收到js的请求");
}];
}- OC 调用 JS
-(void)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);
}];
}
这里的关键点就是：OC和JS商定的方法名要统一，两端要合作一下。
这里的举例，我都用到了处理后的回调，大家运行demo的时候注意看日志文件。
源码下载：点击这里获取Demo
