前言###
最近公司项目进行比较激烈，没有时间写demo，但是时间就像是海绵里的水，挤挤总是会有的。在公司的项目中有用到JS与OC的交互，顺便就把这块的知识总结一下，希望对各位志同道合的朋友有帮助。要是各位有更好的方法可以一起交流交流。
demo截图：
不想看原理的，喜欢简单直接的朋友可以直接下载代码，代码里面有详细的解释：LZBWebViewWithJSInteractive github下载链接
JS与OC交互的类别###
第一 ：JS调用OC的方法
1、采用传统的方法，加载WebView的时候截取URL的方式
2、利用苹果系统框架<JavaScriptCore/JavaScriptCore.h>的JSContext的block方式 或者JSExport协议方式
第二：OC调用JS的方法
1、采用stringByEvaluatingJavaScriptFromString写入JS代码，调用JS的方法
2、采用系统框架<JavaScriptCore/JavaScriptCore.h>的JSContext +evaluateScript调用JS代码
详细解说之JS调用OC方法####
第一种方法：截取URL的方法
在JS端可以这样写的：
比如点击跳转的时候加载一个URL（协议头可以与服务端自定义，参数包括在URL里面，我这里使用的zimu://（协议头）callName_（调用的OC方法名称）?（参数）http://www.jianshu.com/users/d21698127416/latest_articles
<button type = "button" onclick = "locationFunction()" > 点击调用OC方法 </button>
<script type = "text/javascript">
function locationFunction()
{
//加载URL，协议头（zimu://）可以自定义
window.location.href = "zimu://callName_?http://www.jianshu.com/users/d21698127416/latest_articles"
}
</script>
在OC端可以这样写：
在webView的代理中有这样的一个方法
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
这个方法可以控制是否加载URL
所以，通过这个方法我们可以获得加载的URL的字符串
，然后判断这个URL的协议头是否是我们自定义的协议，从而判断是加载这个URL还是响应方法
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
NSString *getURLString = [request.URL absoluteString];
NSLog(@"总的字符串：%@",getURLString);
NSString *htmlHeadString = @"zimu://";
//协议头可以自己定义
if([getURLString hasPrefix:htmlHeadString])
{
NSString *subString = [getURLString substringFromIndex:htmlHeadString.length];
NSArray *arrayStr = [subString componentsSeparatedByString:@"?"];
NSString *fistStr = [arrayStr firstObject];
NSString *methodName = [fistStr stringByReplacingOccurrencesOfString:@"_" withString:@":"];
//调用方法
SEL selector = NSSelectorFromString(methodName);
#pragma clang diagnostic push
#pragma clang diagnostic ignored "-Warc-performSelector-leaks"
//-Warc-performSelector-leaks为唯一的警告标识
[self performSelector:selector withObject:[arrayStr lastObject]];
#pragma clang diagnostic pop
//注意：系统提供的方法最多只有两个参数，如果要多个参数，使用我的扩展类
// - (id)performSelector:(SEL)aSelector withObjects:(NSArray *)objects
return NO;
}
else
return YES;
}
但是这样有一个问题是，系统提供给我们的performSelector方法传入参数是有限制的要是有多个参数就不好办了，怎么办呢？
我这里有一个方法可以参照（可以传入多个参数的调用哦）
要是传入的是多个参数可以参考我的扩展类：
使用performSelector方法调用多个参数
第二种方法：系统框架<JavaScriptCore/JavaScriptCore.h>的应用
利用苹果框架又有两种方式：
1、JSContext的block的方式（苹果框架）
2、JSExport协议方式 （苹果框架）
那么我就两种方式都介绍介绍，那么先说第一种方式JSContext的block的方式的过程：
① 通过webView加载网页
[self.webView loadRequest:[NSURLRequest requestWithURL:localURL]];
② 拿到webView的JS执行环境
//拿到WebView执行JS的执行环境，很重要的东西
JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
③ 通过context 的block的方式调用方法
有参数的情况
//点击传参数 jstoocHavePrams方法名称
context[@"jstoocHavePrams"] = ^(){
//调用方法处理内容
//获得参数数组
NSArray *prams = [JSContext currentArguments];
NSString *arraySting = [[NSString alloc]init];
for (id obj in prams) {
NSLog(@"====%@",obj);
arraySting = [arraySting stringByAppendingFormat:@"%@,",obj];
}
dispatch_async(dispatch_get_main_queue(), ^{
[LZBAlterView lzb_alterViewWithText:@"点击了传参数按钮" OneTitle:arraySting TwoTitle:@"知道了" ThreeTitle:nil handleBlock:^(LZBAlterView *alterView, NSInteger btntag) {
[alterView removeAlterView];
}];
});
};
无参数的情况
//点击了无参数，jstoocNoPrams是JS的方法名称
context[@"jstoocNoPrams"] = ^(){
//调用方法处理内容
NSLog(@"点击了没有传参数按钮");
dispatch_async(dispatch_get_main_queue(), ^{
[LZBAlterView lzb_alterViewWithText:@"点击了没有参数按钮" OneTitle:@"知道了" TwoTitle:nil ThreeTitle:nil handleBlock:^(LZBAlterView *alterView, NSInteger btntag) {
[alterView removeAlterView];
}];
});
};
2、JSExport协议方式（苹果框架）
首先：自定义协议，并且协议遵守<JSExport>协议
并且定义协议方法(就是JS调用的OC方法)
@protocol LZBJSExport <JSExport>
- (void)callChangeColor；
@end
然后，在加载WebView之后注册协议
- (void)regiseterResponser
{
JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//change类似于JS里面的标识（change字符是自定义的，只要和JS中得一样就可以）
[context setObject:self forKeyedSubscript:@"change"];
}
最后，实现协议方法，（你要通过JS调用OC做什么,比如改变背景颜色）
- (void)callChangeColor
{
self.webView.backgroundColor = [self getRandColor];
}
JS中的实现：
//block方式 <button type = "button" onclick = "locationFunction()" > JS调OC第二法无参数 </button>
//block方式 <button type = "button" onclick = "locationFunction2()" > JS调OC第二法传参数 </button>
//JSExport协议的方式<button type = "button" onclick = "change.callChangeColor()" > 点击改变颜色</button>
<script type = "text/javascript">
function locationFunction()
{
//调用OC的方法,没有参数
jstoocNoPrams();
}
function locationFunction2()
{
//调用OC的第二个方法
jstoocHavePrams('参数1','参数2','参数3');
}
</script>
能看到这里的朋友我觉得已经很有耐心，感觉要是接着写下一篇JS与OC交互大总结之二 OC调用JS会显得篇幅比较大，那么就在下一页才写OC调用JS的方法吧。但是这里也可以直接跳转哦
JS与OC交互大总结之二 OC调用JS
小结一下####
JS调用OC有三个方法：
第一个 ：截取URL，太繁琐。
第二个：block形式，我个人比较喜欢
第三个：自定义JSExport协议
如果有兴趣的朋友可以直接下载源码了解：
LZBWebViewWithJSInteractive github下载链接
