OC与JS交互
https://www.jianshu.com/p/bb666b71e104
一、简述
目前原生与JS交互的方式有以下几种
JavaScriptCore
WKWebView
拦截URL
WebViewJavascriptBridge库
二、JavaScriptCore
（一）定义
1.JSContext
为JS的执行提供了上下文环境，通过JSCore执行的JS代码都要通过JSContext来执行。(上下文对象给两者的交互搭建了环境)
2.JSValue
是JS值在OC中的封装，以便JS值在OC中执行
3.两者关系
JSValue不可独立存在，必须依存于JSContext。一个JSContext可对应多个JSValue
每一个JSValue对象都要强引用关联一个JSContext。当与某JSContext对象关联的所有JSValue释放后，JSContext也会被释放。
（二）建立连接
1.文件头部引入相关库
#import <JavaScriptCore/JavaScriptCore.h>
2.加载本地HTML页面
NSString *filePath = [[NSBundle mainBundle] pathForResource:@"JSInteraction" ofType:@"html"];
NSString *htmlStr = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];
[_webView loadHTMLString:htmlStr baseURL:[NSURL URLWithString:filePath]];
3.在webView的代理方法webViewDidFinishLoad中实现连接
//通过KVC方式从webView上获取相应的JSContext
self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//设置错误处理函数
[self.context setExceptionHandler:^(JSContext *context, JSValue *exception) {
NSLog(@"oc catches the exception: %@",exception); }];
self.context[@"JsInteractive"] = self;
Pay：由于加载JS在webViewDidFinishLoad()之前，故JS无法调用OC方法。
解决方法：
1）可在JS中构建一个事件 “webViewDidFinishLoad()”，在原生的webVIewDidFinishLoad()方法中通过context的evaluateScript方法或者webView的stringByEvaluatingJavaScriptFromString()方法来调用。
[self.context evaluateScript:@"webViewDidFinishLoad()"];
[webView stringByEvaluatingJavaScriptFromString:@"webViewDidFinishLoad()"];
2)通过JS延时操作setTimeout使得该方法在OC加载完毕后再执行
setTimeout("showMessage('参数在此')",1000)
三）交互方式
1.Block
1)JS调用OC
self.context[@"showMessage"] = ^(NSString *message){
NSLog(@"----showMessage-JS调用OC----参数为：%@",message); };
<button onclick="showMessage('我是参数')">showMessage-JS调用OC</button>
2)OC调用JS
//1.调用JS语句
[self.context evaluateScript:@"alert('你好！');"];
//2.调用JS中的变量
JSValue *myValue = self.context[@"myObject"];
NSLog(@"---%@---",[myValue toString]);
//3.调用JS中的方法(以下两种均可)
[self.context evaluateScript:@"OcCallJs()"];
[webView stringByEvaluatingJavaScriptFromString:@"OcCallJs()"];
//调用有参数的方法
JSValue *news = self.context[@"showNews"];
[news callWithArguments:@[@"新闻头条",@"时事政治"]];
<script>
var myObject = "我的项目哈哈哈";
function OcCallJs(){
alert("我被OC调用了");
}
function showNews(news,news2){
alert(news+news2);
}</script>
2.Delegate交互
当OC方法为多参数函数时，其在JS中调用需要更改一下以适应JS语法：
1）移除所有冒号
2）跟在冒号后面的参数的第一个字母大写
@protocol JSInteraction
-(void)showDelegateMessage:(NSString *)message;
-(void)showDelegateMessage:(NSString *)message andNumber:(NSInteger)number;
@end
-(void)showDelegateMessage:(NSString *)message{
NSLog(@"我是被JS调用的OC的delegate方法，参数为%@",message);
}
-(void)showDelegateMessage:(NSString *)message andNumber:(NSInteger)number{
NSLog(@"delegate多参数，参数为%ld--%@",number,message);
}
<script>
function webViewDidFinish(){
JsInteractive.showDelegateMessage('参数');
JsInteractive.showDelegateMessageAndNumber('123','1000000');
}
</script>
OcCallJs()方法在上文提到的webVIewDidFinishLoad()中调用
三、WKWebView
（一）定义
1.WKWebView
两种创建方式
//普通初始化
self.wkWebView = [[WKWebView alloc]init];
self.wkWebView.frame = self.view.bounds;
//config方式初始化
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
self.wkWebView = [[WKWebView alloc]initWithFrame:self.view.bounds configuration:config];
self.wkWebView.navigationDelegate = self;
self.wkWebView.UIDelegate = self;
[self.view addSubview:self.wkWebView];
加载网页的方式
//加载本地URL文件
- (nullableWKNavigation*)loadFileURL:(NSURL*)URL allowingReadAccessToURL:(NSURL*)readAccessURL
//加载本地HTML字符串
- (nullableWKNavigation*)loadHTMLString:(NSString*)string baseURL:(nullableNSURL*)baseURL;
//加载二进制数据
- (nullableWKNavigation*)loadData:(NSData*)data MIMEType:(NSString*)MIMEType characterEncodingName:(NSString*)characterEncodingName baseURL:(NSURL*)baseURL
2.WKWebViewConfiguration
如上代码，webView初始化时配置webView的属性，JS调用原生时需要用到。
3.WKUserContentController
这个类主要用来负责原生与JS的交互管理
- (void)addScriptMessageHandler:(id <WKScriptMessageHandler>)scriptMessageHandler name:(NSString *)name;
- (void)removeScriptMessageHandlerForName:(NSString *)name;
addScriptMessageHandler:name:方法注册要被JS调用的方法的名称，然后在对应的JavaScript中使用
window.webkit.messageHandlers.<name>.postMessage(<data>)
方法来向native发送消息。最后记得将方法名remove掉，否则会造成内存泄漏。
4.WKScriptMessageHandler
用来处理JS调用原生的方法
//接受JS发给原生的消息
- (void)userContentController:(WKUserContentController *)userContentControllerdidReceiveScriptMessage:(WKScriptMessage *)message;
5.WKUIDelegate
协议主要用于WKWebView处理web界面的三种提示框(警告框、确认框、输入框)。提供用原生控件显示网页的方法回调。
（二）建立连接
1.文件头部引入相关库
#import <WebKit/WebKit.h>
2.加载HTML页面
NSURL *urlString = [[NSBundle mainBundle] URLForResource:@"JSInteraction.html" withExtension:nil];
if (urlString) {
[_wkWebView loadRequest:[NSURLRequest requestWithURL:urlString]];
}
WKUserContentController *userCC = config.userContentController;
（三）交互方式
1.原生调用JS
WKWebView 提供了一个新的方法evaluateJavaScript:completionHandler:，实现OC 调用JS 等场景。
//获取到input标签的value属性值
NSString *inputValue = @"document.getElementsByName('input')[0].attributes['value'].value";
/** native 调用JS的方法 */
[webView evaluateJavaScript:inputValue completionHandler:^(id _Nullable response, NSError * _Nullable error) {
NSLog(@"value:%@,error:%@",response,error);
}];
2.JS调用原生
/** JS调用OC **/
//此处相当于监听了JS中showMobile这个方法
[self.userCC addScriptMessageHandler:self name:@"showMobile"];
[self.userCC addScriptMessageHandler:self name:@"showName"];//移除WKUserContentController，防止内存泄漏
-(void)removeAllScriptHandler{
[self.userCC removeScriptMessageHandlerForName:@"showMobile"];
[self.userCC removeScriptMessageHandlerForName:@"showName"];
[self.userCC removeScriptMessageHandlerForName:@"showTwo"];
}
JS中：
//多参数用数组传递
function btnClick1() { window.webkit.messageHandlers.showMobile.postMessage(null) }
function btnClick2() {
window.webkit.messageHandlers.showName.postMessage('有个参数')
}
function btnClick3() {
window.webkit.messageHandlers.showTwo.postMessage(['有两个参数啦','canshu'])
}
三、拦截URL
（一）定义
我们要拦截URL，就要通过navigationDelegate的一个代理方法来实现。如果在HTML中要使用alert等弹窗，就必须得实现UIDelegate的相应代理方法。
（二）建立连接
同WKWebView。
（三）交互方式
1.JS调用OC
2.OC 调用 JS
JS 调用OC 方法后，有的操作可能需要将结果返回给JS。这时候就是OC 调用JS 方法的场景。
WKWebView 提供了一个新的方法evaluateJavaScript:completionHandler:，实现OC 调用JS 等场景。
使用自定义loadURL的原因：
如果当前网页正使用window.location.href加载网页的同时，调用window.location.href去调用OC原生方法，会导致加载网页的操作被取消掉。同样的，如果连续使用window.location.href执行两次OC原生调用，也有可能导致第一次的操作被取消掉。
自定义asyncAlert的原因
因为有的JS调用是需要OC 返回结果到JS的。stringByEvaluatingJavaScriptFromString是一个同步方法，会等待js 方法执行完成，而弹出的alert 也会阻塞界面等待用户响应，所以他们可能会造成死锁。导致alert 卡死界面。如果回调的JS 是一个耗时的操作，那么建议将耗时的操作也放入setTimeout的function中。
3.同步和异步
因为 iOS SDK 没有天生支持 js 和 native
相互调用，大家的技术方案都是自己实现的一套调用机制，所以这里面有同步异步的问题。细心的同学就能发现，js 调用 native 是通过插入一个
iframe，这个 iframe 插入完了就完了，执行的结果需要 native 另外用
stringByEvaluatingJavaScriptFromString 方法通知 js，所以这是一个异步的调用。
而 stringByEvaluatingJavaScriptFromString 方法本身会直接返回一个 NSString 类型的执行结果，所以这显然是一个同步调用。
所以 js call native 是异步，native call js 是同步。
四、WebViewJavascriptBridge
1.实质：拦截URL来实现的调用原生功能
2.JS中实现的方法
function setupWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) {
return callback(WebViewJavascriptBridge);
}
if (window.WVJBCallbacks) {
return window.WVJBCallbacks.push(callback);
}
window.WVJBCallbacks = [callback];
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'https://__bridge_loaded__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() {
document.documentElement.removeChild(WVJBIframe)
}, 0)
}
这个方法的作用主要是在第一次加载HTML的时候起作用，目的是加载一次wvjbscheme://__BRIDGE_LOADED__，来触发往HTML中注入一些已经写好的JS方法。
setupWebViewJavascriptBridge(function(bridge) {
/* Initialize your app here */
bridge.registerHandler('JS Echo', function(data, responseCallback) {
console.log("JS Echo called with:", data)
responseCallback(data)
})
bridge.callHandler('ObjC Echo', {'key':'value'}, function responseCallback(responseData) {
console.log("JS received response:", responseData)
})
})
Native 需要调用的 JS 功能，也是需要先注册，然后再执行的。如果Native 需要调用的JS 功能有多个，那么这些功能都要在这里先注册，注册之后才能够被Native 调用。
参照：
https://www.jianshu.com/p/7151987f012d
http://blog.devtang.com/2012/03/24/talk-about-uiwebview-and-phonegap/
