JS和OC的交互这是个永恒话题，使用场景也是越来越多，如今一些reactnative、vue框架等，都是在重点结合原生与H5的混合使用。
那么，如何快捷方便的使用两者交互是一个很重要的关键点。
1.传统上的交互使用
JS调用OC
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
NSString * str = request.URL.relativeString;
NSRange Sharerange = [requestString rangeOfString:@"dabaojian"];//快来大保健
// 找到了
if (range.location != NSNotFound) {
NSLog(@"我去大保健");
}
return YES;
}
webView拦截url链接，获取内容，再处理逻辑,实现以上webView的代理方法，当webView每次开始加载URL时会进入这个方法，我们便可以在这个方法实现JS调用OC。
OC调用JS
webView对象通过调用stringByEvaluatingJavaScriptFromString这个方法执行一段JS代码实现交互。
/OC调用JS
-(void)webViewDidFinishLoad:(UIWebView *)webView{
NSString * str = [self.webView stringByEvaluatingJavaScriptFromString:@"document.getElementById("""index-kw""").value="""li""""];
NSLog(@"webViewDidFinishLoad=%@",str);
}
JavaScriptCore上的交互使用
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
}
JSContext是JavaScriptCore框架中的东西。JavaScriptCore是iOS7中新加入的框架，用来处理JavaScript
2.JSContext如何使用
JSContext: 一个 Context 就是一个 JavaScript 代码执行的环境，也叫作用域
JSValue :S是弱类型的，ObjectiveC是强类型的，JSValue被引入处理这种类型差异，在Objective-C 对象和 JavaScript 对象之间起转换作用
JS调用OC
-
(void)webViewDidFinishLoad:(UIWebView *)webView{
JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
context[@"comeHere"] = ^() {
NSArray *Array= [JSContext currentArguments];
for (JSValue *jsVal in Array) {NSString *str= [NSString stringWithFormat:@"%@",jsVal]; if ([str isEqualToString:@"wanshangqubaojian" ] ) { NSLog(@"晚上去保健"); }else if ([str isEqualToString:@"wanshangyiqiqubaojian"]) { NSLog(@"晚上一起去保健"); } }};
}
代码中@“comeHere”是你需要告诉js端的方法，这个方法就是让js来调用你block中的内容
@"wanshangqubaojian"
@"wanshangyiqiqubaojian"
这两个是js端需要告诉你的方法。
一旦此处代码执行完毕后，就好像是一直放了个context这个东西在这里，一旦你点击webView上A按钮，js就跑到你告诉他的方法里，即：comHere,然后代码就会执行block里的内容，接着走你写好的逻辑判断
if ([str isEqualToString:@"wanshangqubaojian" ] )
最后实现逻辑判断里方法
JSContext你应该要注意的一点
失效原因
网上很多例子都是上述办法，但是当你界面需要再次刷新的时候
[self.webView loadRequest:self.request];
这样会导致js代码重新注入，JSContext就会失效。
解决办法
这个时候你其实还需要一句代码，就是当你执行到
- (void)webViewDidFinishLoad:(UIWebView *)webView
这里的时候必须重新告诉js端，所以我们还需要一个方法，让js端知道我们走到了这个方法，让他再主动调用一次@“comeHere”。
我们可以随便定义这个方法的名字，让js端写好这个方法，等待我们调用。则最终的代码为
- (void)webViewDidFinishLoad:(UIWebView *)webView{
//此处写刚刚贴的JSContext代码
//加上这句
[webView stringByEvaluatingJavaScriptFromString:@"javaCallback()"];
}
3.牛逼的第三方框架
GitHub地址:https://github.com/marcuswestin/WebViewJavascriptBridge
WebViewJavascriptBridge同时支持UIWeView和WKWebView，无论是JS调用OC还是OC调用JS，都可以正常传值和返回值；而且在页面加载时只要JS代码被运行就可以进行交互，上面遇到的缺点和坑在这里都被掩埋的，所以是现在处理交互的主流做法
js代码截取片段
这段代码是必须的，申明交互直接拷贝即可，处理交互部分，需要改动，关键就是和oc端协商的方法名，以及js内部需要的处理逻辑
测试
JS 调用 OC
_bridge = [WebViewJavascriptBridge bridgeForWebView:webView];
[_bridge setWebViewDelegate:self];/*
含义：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
/*
含义：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商定的方法名要统一，两端要合作一下。