iOS与JS交互的总结

iOS和JS的交互看似两个问题，其实要解决的问题只有一个，那就是JS如何调用native方法。因为查询文档我们就可以发现，在UIWebView中，native有直接调用JS的方法, 但是JS却没有直接调用native的方法。

一、native直接调用js的方法：

- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;

二、JS直接调用native的方法

其实，UIWebView并没有提供JS调用native的方法，但是我们却可以通过间接的方法来实现这样的操作。总结看来，间接实现的方式有三种：

1. 在代理方法拦截Url,识别判断

2. Block传值,实现JS调用OC

3. 模型实现，JS直接用oc方法名来调用oc方法

4. 使用第三方工具类：WebViewJavascriptBridge

下面就来简单介绍一下上述方法的简单实用

1.在代理方法拦截Url,识别判断

这种方法原理很简单，UIWebView的界面响应会调起下面的代理方法

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;

在该方法中我们可以识别网页链接中的特殊字段，从而达到JS调起原生方法的目的

//第一步：使用本地的h5文件加载一个网页

//第一步：使用本地的h5文件加载一个网页
NSString *htmlPath = [[NSBundle mainBundle] pathForResource:@"testWebPage" ofType:@"html"];
NSError *error = nil;
NSString  *str = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:&error];
[self.webView loadHTMLString:str baseURL:nil];

//JS中关键代码如下：
<p > <button id="chat" type="button" onclick="location.href ='http://www.testwebpage/?funcName=printInfo:&&info=helloword'">打印信息</button>
</p>

//第二步：拦截协议
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
//获取此时的URL
//'http://www.testwebpage/?funcName=printInfo:&&info=helloword'
NSURL *url = [request URL];
NSString *completeString = [url absoluteString];

//第一步:检测链接中的特殊字段
NSString *needCheckStr = @"http://www.testwebpage/?";
NSRange jumpRange = [completeString rangeOfString:needCheckStr];
if (jumpRange.location != NSNotFound) {
/*
1.检测到链接中包含有特殊字段，客户端要接受响应并做后续处理这就相当于js调起了iOS，
2.在真实的使用时，客户端需要和h5协调，双方需要统一监听的字段
3.参数问题：如果此时的交互需要传递参数，参数也可以放在链接里，同样通过识别字符串的方法来获取
*/
//第二步：拿到链接字符串的后续部分，然后分割字符串得到参数数据
NSMutableString *linkmStr = [NSMutableString stringWithString:completeString];
NSRange deleteRange = {0,needCheckStr.length};
[linkmStr deleteCharactersInRange:deleteRange];
NSArray *params = [linkmStr componentsSeparatedByString:@"&&"];
//取出第一个参数：与h5协商好的方法名
NSString *funcName = [params[0] componentsSeparatedByString:@"="][1];
//取出第二个参数：信息字符串
NSString *info = [params[1] componentsSeparatedByString:@"="][1];
//第三步：调起iOS原生方法
SEL ocFunc = NSSelectorFromString(funcName);
if ([self respondsToSelector:ocFunc]) {
//使用编译预处理，不显示警告提示
#pragma clang diagnostic push
#pragma clang diagnostic ignored "-Warc-performSelector-leaks"
[self performSelector:ocFunc withObject:info];
#pragma clang diagnostic pop
}
//返回NO是为了不再执行点击原链接的跳转
return NO;
}
return YES;
}

2.Block传值,实现JS调用OC

这种方法需要引入头文件

#import <JavaScriptCore/JavaScriptCore.h>

具体的代码操作如下：

JS关键代码：

<p id="print" ><button onclick="sayHello('helloword')" type="button">问候</button></p>

OC关键代码：

- (void)webViewDidFinishLoad:(UIWebView*)webView{
//获取JSContext对象
JSContext *context=[webViewvalueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//sayHello就是js的方法名称，使用一个block对应赋值
context[@"sayHello"] = ^() {
NSArray *args = [JSContextcurrentArguments];
NSString *objString = [NSStringstringWithFormat:@"%@",args[0]] ;
if (objString.length>0) {
NSLog(@"%@",objString);
}
//得到参数之后，这里可以使用调用OC方法，即实现了JS对于OC的调用
};
}

3.模型实现，JS直接用oc方法名来调用oc方法

这种方法的优点在于，JS可以直接用oc方法名来调用oc方法，这样就类似于安卓的addJavaScriptInterface方法，在使用此方法时仍然要导入JavaScriptCore

//第一步：创建一个用与JS交互的类JSHandler继承与NSObject
//在类中声明一个遵守JSExport的协议，并且使JSHandler实现这个新的协议
@protocolJSHandlerProtocol <JSExport>
//单参数方法
- (void)sayHello:(NSString*)greeting;

//多参数的方法
//由于涉及到多参数的问题，从第二个参数开始，外部参数名都要使用大写开头
//因为JS调用OC方法时，是将OC方法拼接连成字符串，如果无法区分就会造成无法识别
//比如对于下面的OC方法，JS调用时
//javascript.sayHelloToWithGreeting(‘参数1’，参数2) //正确写法
//javascript.sayHelloTowithGreeting(‘参数1’，参数2) //错误写法
- (void)sayHelloTo:(NSString*)name WithGreeting:(NSString*)greeting;
@end

@interfaceJSHandler : NSObject<JSHandlerProtocol>

@end

//第二步：实现协议方法
@implementationJSHandler:NSObject
//单参数方法
- (void)sayHello:(NSString*)greeting{
NSLog(@"%s", __func__);
NSLog(@"%@",greeting);
}

//两个参数的方法
- (void)sayHelloTo:(NSString*)name WithGreeting:(NSString*)greeting{
NSLog(@"%s", __func__);
NSLog(@"%@,%@",name,greeting);
}

@end

//第三步：在webView所在的视图控制中，创建JSContext对象，使用协议方法
JSContext*jsContext = [self.webViewvalueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
JSHandler*jsHandler = [JSHandlernew];
//使jsContext可以识别javascript这个类的方法
jsContext[@"javascript"] = jsHandler;

//第四步：此步骤是H5部分的操作，能够调起OC方法的代码如下
<p>sayHello<buttonid="opennew"type="button"onclick="javascript.sayHello('你好!')">问候1</button></p>
<p>sayHelloTo<buttonid="opennew2"type="button"onclick=
"javascript.sayHelloToWithGreeting('zhoushuai', 'Good morning!')">问候2</button></p>

4.使用第三方工具类：WebViewJavascriptBridge

还未使用过，暂时不做过多介绍

最后附上Demo的地址：https://github.com/DreamcoffeeZS/OC-And-JS

其他参考链接：

http://www.cocoachina.com/ios/20160127/15105.html

WebViewJavascriptBridge的用法

：http://www.jianshu.com/p/2c7a53713e13