iOS与JS交互之UIWebView-JavaScriptCore框架

时间 2019-11-29

标签 ios 交互 uiwebview javascriptcore 框架栏目 iOS 繁體版

原文原文链接

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

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

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

1、JS调用iOS：

实现逻辑：点击JS的登陆按钮，JS将登陆成功后的token数据传递给iOS，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);
}

//! 加载URL
function 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];
        });
    };
}
复制代码

实现原理：一、JS与iOS约定好jsToOc方法，做为JS调用iOS的入口；
二、iOS经过[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]获取JS代码的上下文JSContext;
三、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]的方式分别解决两类循环引用的问题。java

2、iOS调用JS：

实现逻辑：点击iOS的登陆按钮，iOS将登陆成功后的token数据传递给JS，JS将收到的数据展现出来。git
实现效果： github
iOS代码：web

//! 登陆按钮
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>
复制代码

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

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

可从QiShare的Github获取工程源码

续篇：iOS与JS交互之UIWebView-JSExport协议（明天更新）
bash

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

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