iOS与JS交互之UIWebView-JavaScriptCore框架

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

先解释下标题:“iOS与JS交互”。iOS指iOS原生代码(文章只有OC示例),JS指WEB前端(不单指JavaScript),交互指JS调用iOSiOS调用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上实现iOSJS交互。
JavaScriptCoreAppleiOS7开放的框架。它为在UITableView上实现OCJS的交互提供了更为简单的方式。

一、JS调用iOS:
  • 实现逻辑:点击JS的登录按钮,JS将登录成功后的token数据传递给iOS,iOS将收到的数据展示出来。
  • 实现效果:


    iOS与JS交互之UIWebView-JavaScriptCore框架_第1张图片
    JS调用iOS实现效果
  • JS代码:
//! 登录按钮

//! 登录
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);
}

//! 加载URL
function loadURL(url) {
  window.location.href = url;
}
  • iOS代码:
//! 导入JavaScriptCore框架头文件
#import 
#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中直接使用外部的JSValueJSContent,因为JSContext强引用BlockBlock强引用外部变量,JSValue又强引用JSContextJSValue需要JSContext来执行JS代码),会形成循环引用。因为JS没有弱引用的概念,所以__weak不会奏效,可以通过将JSValue作为Block内部参数和[JSContext currentContext]的方式分别解决两类循环引用的问题。


二、iOS调用JS:
  • 实现逻辑:点击iOS的登录按钮,iOS将登录成功后的token数据传递给JS,JS将收到的数据展示出来。

  • 实现效果:


    iOS与JS交互之UIWebView-JavaScriptCore框架_第2张图片
    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数据显示框
  • 实现原理:
    1、iOS通过UIWebView的-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协议


了解更多iOS及相关新技术,请关注我们的公众号:

iOS与JS交互之UIWebView-JavaScriptCore框架_第3张图片

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

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

你可能感兴趣的:(iOS与JS交互之UIWebView-JavaScriptCore框架)