iOS与JS交互之UIWebView-JavaScriptCore框架

级别：★★☆☆☆
标签：「iOS与JS交互」「UIWebView与JS交互」「JavaScriptCore」
作者： Xs·H
审校： QiShare团队

先解释下标题：“iOS与JS交互”。iOS指iOS原生代码（文章只有OC示例），JS指WEB前台（不单指JavaScript），交互指JS调使用iOS和iOS调使用JS。
作者将iOS与JS交互总结成了6种方式，并将逐一详情。目录如下：

• iOS与JS交互之UIWebView-协议阻拦
• iOS与JS交互之UIWebView-JavaScriptCore框架
• iOS与JS交互之UIWebView-JSExport协议
• iOS与JS交互之WKWebView-协议阻拦
• iOS与JS交互之WKWebView-WKScriptMessageHandler协议
• iOS与JS交互之WKWebView-WKUIDelegate协议

本文详情如何用JavaScriptCore框架在 UIWebView上实现iOS与JS交互。
JavaScriptCore是Apple在iOS7开放的框架。它为在UITableView上实现OC与JS的交互提供了更为简单的方式。

一、JS调使用iOS：

• 实现逻辑：点击JS的登录按钮，JS将登录成功后的token数据传递给iOS，iOS将收到的数据展现出来。

• 实现效果：

  JS调使用iOS实现效果

• JS代码：

//! 登录按钮<button onclick = "login()" style = "font-size: 18px;">登录</button>

//! 登录function login() {  var token = "js_tokenString";  loginSucceed(token);}//! 登录成功function loginSucceed(token) {  var action = "loginSucceed";  jsToOc(action, token);}//! JS调使用OC入口function jsToOc(action, params) {  var url = "jsToOc://" + action + "?" + params;  loadURL(url);}//! 加载URLfunction loadURL(url) {  window.location.href = url;}

• iOS代码：

//! 导入JavaScriptCore框架头文件#import <JavaScriptCore/JavaScriptCore.h>

#pragma mark - UIWebViewDelegate//! UIWebView在每次加载请求完成后会调使用此方法- (void)webViewDidFinishLoad:(UIWebView *)webView {        //! 获取JS代码的执行环境/上下文/作使用域    JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];    //! 监听JS代码里面的jsToOc方法（执行效果上可以了解成重写了JS的jsToOc方法）    context[@"jsToOc"] = ^(NSString *action, NSString *params) {        dispatch_async(dispatch_get_main_queue(), ^{            [UIWebViewJavaScriptCoreController showAlertWithTitle:action message:params cancelHandler:nil];        });    };}

• 实现原理：
  1、JS与iOS商定好jsToOc方法，作为JS调使用iOS的入口；
  2、iOS通过[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]获取JS代码的上下文JSContext;
  3、JS调使用jsToOc方法，iOS用Block形式监听（重写）此方法context[@"jsToOc"] = ^() {}，收到JS的调使用请求和参数；

PS：在用Block形式监听（重写）JS的方法的时候，不要在Block中直接用外部的JSValue和JSContent，由于JSContext强引使用Block，Block强引使用外部变量，JSValue又强引使用JSContext（JSValue需要JSContext来执行JS代码），会形成循环引使用。由于JS没有弱引使用的概念，所以__weak不会见效，可以通过将JSValue作为Block内部参数和[JSContext currentContext]的方式分别处理两类循环引使用的问题。

二、iOS调使用JS：

• 实现逻辑：点击iOS的登录按钮，iOS将登录成功后的token数据传递给JS，JS将收到的数据展现出来。

• 实现效果：

  iOS调使用JS实现效果

• iOS代码：

//! 登录按钮UIBarButtonItem *loginBtnItem = [[UIBarButtonItem alloc] initWithTitle:@"登录" style:UIBarButtonItemStylePlain target:self action:@selector(login:)];self.navigationItem.rightBarButtonItems = @[loginBtnItem];

//! 登录方法- (void)login:(id)sender {        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{        JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];        //! JSContext -evaluateScript:方式调使用JS方法        [context evaluateScript:[NSString stringWithFormat:@"ocToJs('loginSucceed', 'oc_tokenString')"]];        //! JSValue -callWithArguments:方式调使用JS方法        // [context[@"ocToJs"] callWithArguments:@[@"loginSucceed", @"oc_tokenString"]];    });}

• JS代码：

//! iOS调使用JS入口function ocToJs(action, params) {  document.getElementById("returnValue").innerHTML = action + '?' + params;}

//! iOS调使用JS数据显示框<div id = "returnValue" style = "font-size: 18px; border: 1px dotted; height: 50px;"> </div>

• 实现原理：
  1、iOS通过UITableView的-valueForKeyPath:方法获取JSContext对象（保证在最新的JS环境中执行JS代码）；
  2、iOS通过JSContext的-evaluateScript:方法执行一段JS代码ocToJs('loginSucceed', 'oc_tokenString')；
  3、JS在ocToJs方法中将iOS传过来的数据显示在div元素中。

PS：除了用JSContext的-evaluateScript:方法之外，还可以先通过[context[@"ocToJs"]获取到JS的ocToJs方法对应的JSValue，而后用JSValue的-callWithArguments:方法调使用JS的ocToJs方法。

• 可从QiShare的Github获取工程源码

续篇：iOS与JS交互之UIWebView-JSExport协议

关注我们的途径有：
QiShare(简书)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公众号)

推荐文章：
vue-cli 自动化测试 Nightwatch 详解
Vuex工作原理详解