JS与OC互相调用的一百种方法(包括WKWebView和UIWebView)
首先，UP主要承认错误，JS调用OC并没有一百种那么多~但是，也是有很多种办法的，起码我们可以花样使用。好了，废话不多说，下面开始逐一介绍。。。
一、简单介绍
JSCore全称为JavaScriptCore，是苹果公司在iOS中加入的一个新的framework。该framework为OC与JS代码相互操作的提供了极大的便利。该工程默认是没有导入工程中的，需要我们手动添加。
添加完成后，我们可以看到JavaScriptCore.h中包含以下5个主要的文件。
#import "JSContext.h"
#import "JSValue.h"
#import "JSManagedValue.h"
#import "JSVirtualMachine.h"
#import "JSExport.h"JSContext: 代表JavaScript的执行环境。你可以创建JSContent在OC环境中执行JavaScript脚本，同时也可以在JavaScript脚本中访问OC中的值或者方法。
JSValue：是OC和JavaScript值相互转化的桥梁。他提供了很多方法把OC和JavaScript的数据类型进行相互转化。其一一对应关系如下表所示：
JSManagedValue：JSValue的包装类。JS和OC对象的内存管理辅助对象。由于JS内存管理是垃圾回收，并且JS中的对象都是强引用，而OC是引用计数。如果双方相互引用，势必会造成循环引用，而导致内存泄露。我们可以用JSManagedValue保存JSValue来避免。
JSVirtualMachine： JS运行的虚拟机。可以支持并行的JavaScript执行，管理JavaScript和OC转换中的内存管理。
JSExport：一个协议，如果JS对象想直接调用OC对象里面的方法和属性，那么这个OC对象只要实现这个JSExport协议就可以了。
下面我们通过实例案例来学习JSCore的用法。
二、OC中调用JS方法
案例一：我在js中定义了一个函数add(a,b)，我们需要在OC中进行调用。
-(void)OCCallJS{
self.context = [[JSContext alloc] init];
NSString *js = @"function add(a,b) {return a+b}";
[self.context evaluateScript:js];
JSValue *addJS = self.context[@"add"];
JSValue *sum = [addJS callWithArguments:@[@(10),@(17)]];
NSInteger intSum = [sum toInt32];
NSLog(@"intSum: %zi",intSum);
}三、JS中调用OC方法
JS中调用OC有两种方法，第一种为block调用，第二种为JSExport protocol。
案例二：我们在OC中定义了一个如下方法，我们需要在JS中对它进行调用
-(NSInteger)add:(NSInteger)a and:(NSInteger)b{
return a+b;
}3.1、block调用
-(void)JSCallOC_block{
self.context = [[JSContext alloc] init];
__weak typeof(self) weakSelf = self;
self.context[@"add"] = ^NSInteger(NSInteger a, NSInteger b){
return [weakSelf add:a and:b];
};
JSValue *sum = [self.context evaluateScript:@"add(4,5)"];
NSInteger intSum = [sum toInt32];
NSLog(@"intSum: %zi",intSum);
}3.2、JSExport protocol
第一步：定义一个遵守JSExport的AddJSExport协议。
@protocol AddJSExport
//用宏转换下，将JS函数名字指定为add；
JSExportAs(add, - (NSInteger)add:(NSInteger)a and:(NSInteger)b);
@property (nonatomic, assign) NSInteger sum;
@end
第二步：新建一个对象AddJSExportObj，去实现以上协议。
AddJSExportObj.h
@interface AddJSExportObj : NSObject
@property (nonatomic, assign) NSInteger sum;
@end
AddJSExportObj.m
@implementation AddJSExportObj
-(NSInteger)add:(NSInteger)a and:(NSInteger)b{
return a+b;
}
@end
第三步：在VC中进行JS调用
-(void)JSCallOC_JSExport{
self.context = [[JSContext alloc] init];
//异常处理
self.context.exceptionHandler = ^(JSContext *context, JSValue *exception){
[JSContext currentContext].exception = exception;
NSLog(@"exception:%@",exception);
};
self.addObj = [[AddJSExportObj alloc] init];
self.context[@"OCAddObj"] = self.addObj;//js中的OCAddObj对象==>OC中的AddJSExportObj对象
[self.context evaluateScript:@"OCAddObj.sum = OCAddObj.add(2,30)"];
NSLog(@"%zi",self.addObj.sum);
}
四、一个从服务端下发JS脚本，执行本地方法的实现思路
案例三:本地定义了一系列方法，可以通过服务端下发js脚本去控制具体去执行那些方法。这样就可以在远端实现对于客户端的控制。
第一步：预置本地方法
-(void)initJS{
__weak typeof(self) weakSelf = self;
self.context[@"execute1"] = ^(){
[weakSelf execute1];
};
self.context[@"execute2"] = ^(){
[weakSelf execute2];
};
}
-(void)execute1{
NSLog(@"execute1");
}
-(void)execute2{
NSLog(@"execute2");
}第二步：服务端下发脚本
-(NSString *)getJS{
//可以从服务端下发
//return @"execute1()";
return @"execute2()";
}第三步：根据服务端下发脚本执行
-(void)executeByJs{
[self initJS];
NSString *js = [self getJS];
[self.context evaluateScript:js];
}五、JSCore在Web容器中的使用
在UIWebView中，我们可以在- (void)webViewDidFinishLoad:(UIWebView *)webView
方法中，通过KVC的方式获取到当前容器的JSContent对象，通过该对象，我们就可以方便的进行hybrid操作。
JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
案例演示：在html中调研OC代码中的分享功能和调用相机功能。
第一步:HelloWord.html代码如下：
function jsCallNative(){
WBBridge.callCamera();
}
function jsCallNative2(){
var shareInfo = "分享内容";
var str = WBBridge.share(shareInfo);
alert(str);
}
第二步：实现一个遵守JSExport的协议WebViewJSExport
@protocol WebViewJSExport
- (void)callCamera;
- (NSString*)share:(NSString*)shareString;
@end 第三步：当前VC需要实现WebViewJSExport
@interface ViewController ()
@property (nonatomic, strong) JSContext *context;
@property (nonatomic, strong) UIWebView *webView;
@end
@implementation ViewController
-(void)initWebView{
self.context = [[JSContext alloc] init];
_webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
_webView.delegate = self;
[self.view addSubview:_webView];
NSURL *url = [[NSURL alloc] initWithString:@"http://localhost:8080/myDiary/HelloWorld.html"];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[self.webView loadRequest:request];
}
- (void)webViewDidFinishLoad:(UIWebView *)webView{
JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
_context = context;
// 将本对象与 JS 中的 WBBridge 对象桥接在一起，在 JS 中 WBBridge 代表本对象
[_context setObject:self forKeyedSubscript:@"WBBridge"];
_context.exceptionHandler = ^(JSContext* context, JSValue* exceptionValue) {
context.exception = exceptionValue;
NSLog(@"异常信息：%@", exceptionValue);
};
}
- (void)callCamera{
NSLog(@"调用相机");
}
- (NSString*)share:(NSString*)shareString{
NSLog(@"分享::::%@",shareString);
return @"分享成功";
}
@end 上面总计的是一些基本的JS与OC互相调用的方法，下面介绍UIWebView与WKWebView如何进行JS交互：
一.UIWebView的基本用法
1.1 加载网页
UIWebView *webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
webView.delegate = self;
[self.view addSubview:webView];
//网络地址
NSURL *url = [[NSURL alloc] initWithString:@"http://www.taobao.com"];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[webView loadRequest:request];1.2 UIWebViewDelegate几个常用的代理方法
//进行加载前的预判断，如果返回YES，则会进入后续流程（StartLoad,FinishLoad）。如果返回NO，这不会进入后续流程。
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;
//开始加载网页
- (void)webViewDidStartLoad:(UIWebView *)webView;
//加载完成
- (void)webViewDidFinishLoad:(UIWebView *)webView;
//加载失败
- (void)webView:(UIWebView *)webView didFailLoadWithError:(nullable NSError *)error;1.3 OC调用JS中的方法
比如我们在加载的HTML文件中有如下js代码：
- (nullable NSString )stringByEvaluatingJavaScriptFromString:(NSString )script;
函数进行js调用。
[webView stringByEvaluatingJavaScriptFromString:@"hello()"];
[webView stringByEvaluatingJavaScriptFromString:@"helloWithName('jack')"];js代码不一定要在js文件中预留，也可以在代码中通过字符串的形式进行调用，比如下面：
//自定义js函数
NSString *jsString = @"function sayHello(){ \
alert('jack11') \
} \
sayHello()";
[_webView stringByEvaluatingJavaScriptFromString:jsString];
NSString *jsString = @" var p = document.createElement('p'); \
p.innerText = 'New Line'; \
document.body.appendChild(p); \
";
[_webView stringByEvaluatingJavaScriptFromString:jsString];1.4 JS中调用OC的方法
具体让js通知native进行方法调用，我们可以让js产生一个特殊的请求。可以让Native代码可以拦截到，而且不然用户察觉。业界一般的实现方案是在网页中加载一个隐藏的iframe来实现该功能。通过将iframe的src指定为一个特殊的URL，实现在
- (BOOL)webView:(UIWebView )webView shouldStartLoadWithRequest:(NSURLRequest )request navigationType:(UIWebViewNavigationType)navigationType;方案中进行拦截处理。对应的js调用代码如下：
function loadURL(url) {
var iFrame;
iFrame = document.createElement("iframe");
iFrame.setAttribute("src", url);
iFrame.setAttribute("style", "display:none;");
iFrame.setAttribute("height", "0px");
iFrame.setAttribute("width", "0px");
iFrame.setAttribute("frameborder", "0");
document.body.appendChild(iFrame);
// 发起请求后这个iFrame就没用了，所以把它从dom上移除掉
iFrame.parentNode.removeChild(iFrame);
iFrame = null;
}
比如我们在js代码中，调用一下两个js方法：
function iOS_alert() {//调用自定义对话框
loadURL("alert://abc");
}
function call() {// js中进行拨打电话处理
loadURL("tel://17715022071");
}- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
NSURL * url = [request URL];
if ([[url scheme] isEqualToString:@"alert"]) {//拦截请求，弹出自定义对话框
UIAlertView * alertView = [[UIAlertView alloc] initWithTitle:@"test" message:[url host] delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil];
[alertView show];
return NO;
}else if([[url scheme] isEqualToString:@"tel"]){//拦截拨打电话请求
BOOL result = [[UIApplication sharedApplication] openURL:url];
if (!result) {
NSLog(@"您的设备不支持打电话");
} else {
NSLog(@"电话打了");
}
return NO;
}
return YES;
}2.WKWebView的基本用法
2.1 加载网页
WKWebView *webView = [[WKWebView alloc] initWithFrame:[UIScreen mainScreen].bounds];
NSURL *url = [NSURL URLWithString:@"http://www.taobao.com"];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[webView loadRequest:request];
[self.view addSubview:webView];2.2 几个常用的代理方法
/**
* 根据webView、navigationAction相关信息决定这次跳转是否可以继续进行,这些信息包含HTTP发送请求，如头部包含User-Agent,Accept,refer
* 在发送请求之前，决定是否跳转的代理
* @param webView
* @param navigationAction
* @param decisionHandler
*/
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler{
decisionHandler(WKNavigationActionPolicyAllow);
}
/**
* 这个代理方法表示当客户端收到服务器的响应头，根据response相关信息，可以决定这次跳转是否可以继续进行。
* 在收到响应后，决定是否跳转的代理
* @param webView
* @param navigationResponse
* @param decisionHandler
*/
- (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler{
decisionHandler(WKNavigationResponsePolicyAllow);
}
/**
* 准备加载页面。等同于UIWebViewDelegate: - webView:shouldStartLoadWithRequest:navigationType
*
* @param webView
* @param navigation
*/
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(null_unspecified WKNavigation *)navigation{
}
/**
* 这个代理是服务器redirect时调用
* 接收到服务器跳转请求的代理
* @param webView
* @param navigation
*/
- (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(null_unspecified WKNavigation *)navigation{
}
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(null_unspecified WKNavigation *)navigation withError:(NSError *)error{
}
/**
* 内容开始加载. 等同于UIWebViewDelegate: - webViewDidStartLoad:
*
* @param webView
* @param navigation
*/
- (void)webView:(WKWebView *)webView didCommitNavigation:(null_unspecified WKNavigation *)navigation{
}
/**
* 页面加载完成。 等同于UIWebViewDelegate: - webViewDidFinishLoad:
*
* @param webView
* @param navigation
*/
- (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigation *)navigation{
}
/**
* 页面加载失败。 等同于UIWebViewDelegate: - webView:didFailLoadWithError:
*
* @param webView
* @param navigation
* @param error
*/
- (void)webView:(WKWebView *)webView didFailNavigation:(null_unspecified WKNavigation *)navigation withError:(NSError *)error{
}
- (void)webViewWebContentProcessDidTerminate:(WKWebView *)webView NS_AVAILABLE(10_11, 9_0){
}
/*
我们看看WKUIDelegate的几个代理方法，虽然不是必须实现的，但是如果我们的页面中有调用了js的alert、confirm、prompt方法，我们应该实现下面这几个代理方法，然后在原来这里调用native的弹出窗，因为使用WKWebView后，HTML中的alert、confirm、prompt方法调用是不会再弹出窗口了，只是转化成ios的native回调代理方法
*/
#pragma mark - WKUIDelegate
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler{
UIAlertController *alertView = [UIAlertController alertControllerWithTitle:@"h5Container" message:message preferredStyle:UIAlertControllerStyleAlert];
// [alertView addTextFieldWithConfigurationHandler:^(UITextField * _Nonnull textField) {
// textField.textColor = [UIColor redColor];
// }];
[alertView addAction:[UIAlertAction actionWithTitle:@"我很确定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
completionHandler();
}]];
[self presentViewController:alertView animated:YES completion:nil];
}2.2 OC调用JS中的方法
- (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ __nullable)(__nullable id, NSError * __nullable error))completionHandler;
比如我们在加载的HTML文件中有如下js代码：
[_wkView evaluateJavaScript:@"hello()" completionHandler:^(id item, NSError * error) {
}];
[_wkView evaluateJavaScript:@"helloWithName('jack')" completionHandler:^(id item, NSError *error) {
}];
NSString *jsString = @"function sayHello(){ \
alert('jack11') \
} \
sayHello()";
[_wkView evaluateJavaScript:jsString completionHandler:^(id item, NSError *error) {
}];
jsString = @" var p = document.createElement('p'); \
p.innerText = 'New Line'; \
document.body.appendChild(p); \
";
[_wkView evaluateJavaScript:jsString completionHandler:^(id item, NSError *error) {
}];2.3 JS中调用OC的方法
除了和UIWebView加载一个隐藏的ifame之外，WKWebView自身还提供了一套js调用native的规范。
我们可以在初始化WKWebView的时候，给他设置一个config参数。
//高端配置
//创建配置
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
//创建UserContentController(提供javaScript向webView发送消息的方法)
WKUserContentController *userContent = [[WKUserContentController alloc] init];
//添加消息处理，注意：self指代的是需要遵守WKScriptMessageHandler协议，结束时需要移除
[userContent addScriptMessageHandler:self name:@"NativeMethod"];
//将UserContentController设置到配置文件中
config.userContentController = userContent;
//高端的自定义配置创建WKWebView
_wkView = [[YXWKView alloc] initWithFrame:self.view.bounds configuration:config];
NSURL *url = [NSURL URLWithString:@"http://localhost:8080/myDiary/index.html"];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[_wkView loadRequest:request];
_wkView.UIDelegate = self;
_wkView.navigationDelegate = self;
[self.view addSubview:_wkView];我们在js可以通过NativeMethod这个Handler让js代码调用native。
比如在js代码中，我新增了一个方法
触发以上方法的时候，会在native以下方法中进行拦截处理。
#pragma mark - WKScriptMessageHandler
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
//这里就是使用高端配置，js调用native的处理地方。我们可以根据name和body，进行桥协议的处理。
NSString *messageName = message.name;
if ([@"NativeMethod" isEqualToString:messageName]) {
id messageBody = message.body;
NSLog(@"%@",messageBody);
}
}最后总结下WKWebView和UIWebView应该如何取舍
WKWebView是苹果在WWDC2014发布会中发布IOS8的时候公布WebKit时候使用的新型的H5容器。它与UIWebView相比较，拥有更快的加载速度和性能，更低的内存占用。将UIWebViewDelegate和UIWebView重构成了14个类，3个协议，可以让开发者进行更加细致的配置。
但是他有一个最致命的缺陷，就是WKWebView的请求不能被NSURLProtocol截获。而我们团队开发的app中对于H5容器最佳的优化点主要就在于使用NSURLProtocol技术对于H5进行离线包的处理和H5的图片和Native的图片公用一套缓存的技术。因为该问题的存在，目前我们团队还没有使用WKWebView代替UIWebVIew。