iOS与JS交互之UIWebView协议拦截

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

先解释下标题：“iOS与JS交互”。iOS指iOS原生代码（文章只有OC示例），JS指WEB前端（不单指JavaScript），交互指JS调用iOS和iOS调用JS。 一般状况下，iOS与JS可经过四种方式进行交互。做者将经过四篇文章逐一介绍。

---

本文介绍经过 UIWebView协议拦截的方式实现iOS与JS交互。

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代码：

#pragma mark - UIWebViewDelegate

//! UIWebView在每次加载请求前会调用此方法来确认是否加载此请求
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    
    if ([request.URL.scheme caseInsensitiveCompare:@"jsToOc"] == NSOrderedSame) {
        [self.class showAlertWithTitle:request.URL.host message:request.URL.query cancelHandler:nil];
        return NO;
    }
    
    return YES;
}
复制代码

• 实现原理：
  一、JS与iOS约定好jsToOc协议，用做JS在调用iOS时url的scheme；
  二、JS在登陆成功后加载含有token数据的url：(jsToOc://loginSucceed?js_tokenString)；
  三、iOS的UIWebView在加载请求前都会调用-webView:shouldStartLoadWithRequest:navigationType:方法来确认是否加载此请求；
  四、iOS在此方法内截取jsToOc协议获取JS传过来的数据，用UIAlertController显示出来，并不容许加载此请求。
  

PS：除了显示截取到的数据，iOS还能够将request.URL.host看做JS想调用的方法名，将request.URL.query看做该方法的参数集，从而体现出JS调用iOS的概念。

---

2、iOS调用JS：

• 实现逻辑：点击iOS的登陆按钮，iOS将登陆成功后的token数据传递给JS，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(), ^{
        NSString *jsString = [NSString stringWithFormat:@"ocToJs('loginSucceed', 'oc_tokenString')"];
        [self.webView stringByEvaluatingJavaScriptFromString:jsString];
    });
}
复制代码

• 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使用UIWebView的-stringByEvaluatingJavaScriptFromString:方法访问JS；
  二、iOS与JS约定好ocToJs方法，用做iOS在调用JS时的入口方法；
  三、iOS在登陆成功后以loginSucceed和oc_tokenString为参数访问ocToJs方法；
  四、JS在ocToJs方法中将iOS传过来的数据显示在div元素中。

PS：UIWebView的-stringByEvaluatingJavaScriptFromString:方法能够执行JavaScript代码。但只有在整个webView加载完成以后-webViewDidFinishLoad:调用此方法才会有响应。好比：咱们能够经过以下方式获取JS的标题。

//! UIWebView在每次加载请求完成后会调用此方法
- (void)webViewDidFinishLoad:(UIWebView *)webView {
    
    self.title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
}
复制代码

可从Github获取工程源码

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

推荐文章：
W3C规范标准化流程
糖是甜的，你也是: 致async