下文中的Demo地址: iOS与JS交互
1.UIWebview与JavaScriptCore
JavaScriptCore中常用的类型：
- JSContext ：JSContext代表JS的执行环境，它的对象通过
-evaluateScipt:方法就可以执行JS代码。可以通过
JSContext *jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
来从webview上获取相应的JSContext。
- JSValue ：JSValue中封装了JS与ObjC中对应的类型，实现相互间的转换，以及调用JS的API等。
- JSExport ：JSExport是一个协议，一个协议A，只有当协议A继承自JSExport协议时，A中的方法才能被JS调用。
Objective-C与JS交互
通过JSContext，有两种方式与JS交互：
- 通过
-evaluateScipt:方法直接调用JS代码
JSContext *context = [[JSContext alloc]init];
[context evaluateScript:@"function add(a){return a + 10;}"]; // 定义函数
[context evaluateScript:@"var num = 5;"]; // 定义变量
JSValue *addFunc = context[@"add"]; // 获取add函数
JSValue *numVar = context[@"num"]; // 获取变量num
JSValue *result = [addFunc callWithArguments:@[numVar]];
NSLog(@"%@",result); // 输出 15
- 向JSContext中注入对象模型，然后调用模型的方法
HTML，在body标签中写如下代码：
回调结果:
首先，在script标签中声明了两个回调方法，供iOS端来调用；
之后声明了三个button来调用不同的iOS的方法，第一个是一个参数或无参数的方法showMessage ,第二个是多参数的方法- mixAAndB 。
之所以要区分单个参数和多参数的情况，是因为当多个参数时，如iOS端的方法声明是- (void)mixA:(NSString *)a andB:(NSString *)b; 在JS调用时应该将方法名连起来，调整大小写，mixAAndB(a,b) 。
三个方法都是通过一个名为 OC 的对象调用，这个对象是要在iOS端注入的对象。
最后，callback方法中，将回调结果展示在一个span标签当中。
在协议中声明方法时，可以使用JSExport 中的JSExportAs 宏来缩短JS端调用时使用的方法名，这样JS端调用时只需要testArgumentTypes(i,d,b,s,n,a,o) 即可。
@protocol SomeProtocol
JSExportAs(testArgumentTypes,
- (NSString *)testArgumentTypesWithInt:(int)i double:(double)d
boolean:(BOOL)b string:(NSString *)s number:(NSNumber *)n
array:(NSArray *)a dictionary:(NSDictionary *)o
);
@end
在iOS的viewController的代码（仅做测试，不考虑代码是否合理）:
首先，声明一个协议JSInteract 并让它遵守JSExport 协议，在协议中声明需要让JS调用的方法：
#import
@protocol JSInteract
- (void)showMessage:(NSString *)message;
- (void)doSomethingThenCallBack:(NSString *)message;
- (void)mixA:(NSString *)aString andB:(NSString*)bString;
@end
让ViewController遵守JSInteract并实现协议中的方法
@interface ViewController ()
@property (nonatomic, strong) JSContext *context;
@property (nonatomic, strong)IBOutlet UIWebView *webview;
@end
接下来，在webview完成加载时，获取JSContext，并注入 OC 对象（即为vc本身），在vc中实现协议中声明的方法：
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.webview.delegate = self;
NSURL *htmlUrl = [[NSBundle mainBundle]URLForResource:@"interact" withExtension:@"html"];
[self.webview loadRequest:[NSURLRequest requestWithURL:htmlUrl]];
}
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
self.context[@"OC"] = self; // 注入JS需要的“OC”对象
}
- (void)showMessage:(NSString *)message
{
NSLog(@"current:%@",[NSThread currentThread]);// 子线程
dispatch_async(dispatch_get_main_queue(), ^{
UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"JS 调用了 OC" message:message preferredStyle:UIAlertControllerStyleAlert];
UIAlertAction *cancel = [UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleCancel handler:nil];
[alert addAction:cancel];
[self presentViewController:alert animated:YES completion:nil];
});
}
- (void)doSomethingThenCallBack:(NSString *)message
{
NSString *result = [message stringByAppendingString:@"
OC get message from JS then call back."];
JSValue *callback = self.context[@"callback"];
[callback callWithArguments:@[result]];
}
- (void)mixA:(NSString *)aString andB:(NSString *)bString
{
NSLog(@"A:%@ and B:%@",aString,bString);
JSValue *alertCallback = self.context[@"alertCallback"];
[alertCallback callWithArguments:@[aString,bString]];
}
需要注意的是，JS调用iOS方法时，该方法会在子线程执行，如果需要刷新UI要切换到主线程，而回调JS方法时，保持在子线程即可。
效果：
[图片上传失败...(image-b9daf6-1523266142150)]
参考文章：
iOS与JS交互实战篇（Objc版）
另可参考
从零收拾一个hybrid框架（一）-- 从选择JS通信方案开始
更多关于JavaScriptCore：
iOS7新JavaScriptCore框架入门介绍
JavaScriptCore框架在iOS7中的对象交互和管理
使用Safari对webview进行调试：
怎么使用Safari对webview进行调试
模拟器或真机，在设置--Safari--高级 中打开Web检查器(web Inspector)
Mac Safari 浏览器，偏好设置--高级--打开'开发'菜单
在开发菜单中即可连接当前机器正在打开的webview页面
2. WKWebview
在WKWebview中，不能使用JavascriptCore进行交互，而是使用messageHandlers，相关的方法在WebKit的WKScriptMessageHandler中：
/*! A class conforming to the WKScriptMessageHandler protocol provides a
method for receiving messages from JavaScript running in a webpage.
*/
@protocol WKScriptMessageHandler
@required
/*! @abstract Invoked when a script message is received from a webpage.
@param userContentController The user content controller invoking the
delegate method.
@param message The script message received.
*/
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message;
@end
除此之外，在WKUIDelegate也有一些与JS的Alert相关的方法
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler;
- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler;
- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * _Nullable result))completionHandler;
在WKWebview中，JS似乎不能直接 弹出alert，只能通过上面几个方法，将消息和回调作为参数传入，由iOS端来展示Alert。这也算交互的一小部分吧。
回到正题，我们一般想要的交互是JS调用iOS的函数，或者iOS调用JS的函数。
iOS 调用 JS中的函数
直接通过WKWebview的evaluateJavaScript:completionHandler:实例方法
// 调用JS中的callbackForiOS方法，参数为'Yes im'
[wkWebviewObj evaluateJavaScript:@"callbackForiOS(\"Yes Im\")" completionHandler:^(_Nullable id obj, NSError * _Nullable error) {
NSLog(@"finish callback");
}];
JS 调用iOS中的函数
以调用某个UIViewController的方法为例，让其遵守WKScriptMessageHandler：
#import
@interface MKViewController ()
@property (nonatomic, strong) WKWebView *webview;
@end
初始化:
- (void)viewDidLoad {
[super viewDidLoad];
// 偏好设置
WKPreferences *prefs = [[WKPreferences alloc]init];
prefs.minimumFontSize = 20;
prefs.javaScriptEnabled = YES;
WKWebViewConfiguration *cfg = [WKWebViewConfiguration new];
cfg.preferences = prefs;
cfg.processPool = [WKProcessPool new];
// UserContentController, 与JS交互发生的地方
cfg.userContentController = [WKUserContentController new];
// 只有注册了的name，js使用这个name发送消息才会进入回调
[cfg.userContentController addScriptMessageHandler:self name:@"iOSShowMessage"];
self.webview = [[WKWebView alloc]initWithFrame:self.view.bounds configuration:cfg];
[self.view addSubview:self.webview];
NSString *paht = [[NSBundle mainBundle] pathForResource:@"WKInteract" ofType:@"html"];
NSString *content = [[NSString alloc] initWithContentsOfFile:paht encoding:NSUTF8StringEncoding error:nil];
[self.webview loadHTMLString:content baseURL:nil];
// 如果需要WKWebview创建、关闭webview的回调或者与AlertPanel相关的回调，使用UIDelegate
// self.webview.UIDelegate = self;
}
在初始化代码中，为cfg创建了userContentController， 并注册了一个名为iOSShowMessage的MessageHandler.在JS中，对应地使用下面代码调用MessageHandler的方法：
// iOSShowMessage为上面WKWebview初始化时注册的name
window.webkit.messageHandlers.iOSShowMessage.postMessage("Are u iOS?")
如果JS执行了上面的代码，iOS中会在WKScriptMessageHandler协议的方法中得到回调：
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
// message.name即注册时使用的name，message.body为参数
if ([message.name isEqualToString:@"iOSShowMessage"]) {
// code to execute when receive JS message
}
}
效果图:
[图片上传失败...(image-d01a43-1523266142150)]
示例的HTML代码：
interact with ios
回调结果: