iOS与JS交互之WKWebView-协议阻拦

级别：★★☆☆☆
标签：「iOS与JS交互」「WKWebView与JS交互」「WKWebView阻拦协议」
作者： 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协议

本文详情通过 WKWebView协议阻拦的方式实现iOS与JS交互。
WKWebView是Apple在iOS8推出的Webkit框架中的负责网页的渲染与展现的类，相比UIWebView速度更快，占使用内存更少，支持更多的HTML特性。

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

#pragma mark - WKNavigationDelegate//! WKWeView在每次加载请求前会调使用此方法来确认能否进行请求跳转- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {        if ([navigationAction.request.URL.scheme caseInsensitiveCompare:@"jsToOc"] == NSOrderedSame) {        [WKWebViewInterceptController showAlertWithTitle:navigationAction.request.URL.host message:navigationAction.request.URL.query cancelHandler:nil];        decisionHandler(WKNavigationActionPolicyCancel);    }    else {        decisionHandler(WKNavigationActionPolicyAllow);    }}

• 实现原理：
  1、JS与iOS商定好jsToOc协议，使用作JS在调使用iOS时url的scheme；
  2、JS在登录成功后加载含有token数据的url：(jsToOc://loginSucceed?js_tokenString)；
  3、iOS的WKWebView在请求跳转前会调使用-webView:decidePolicyForNavigationAction:decisionHandler:方法来确认能否允许跳转；
  4、iOS在此方法内截取jsToOc协议获取JS传过来的数据，使用UIAlertController显示出来，并通过decisionHandler不允许此请求跳转。

PS1：除了显示截取到的数据，iOS还可以将navigationAction.request.URL.host看作JS想调使用的方法名，将navigationAction.request.URL.query看作该方法的参数集，从而表现出JS调使用iOS的概念。
PS2：在-webView:decidePolicyForNavigationAction:decisionHandler:方法中肯定要调使用decisionHandler回调来制定允许请求跳转WKNavigationActionPolicyAllow或者者不允许跳转WKNavigationActionPolicyAllow，不然会崩溃。

二、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(), ^{        [self.webView evaluateJavaScript:@"ocToJs('loginSucceed', 'oc_tokenString')" completionHandler:^(id response, NSError *error) {}];    });}

• 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与JS商定好ocToJs方法，使用作iOS在调使用JS时的入口方法；
  2、iOS在登录成功后以loginSucceed和oc_tokenString为参数拼接JS代码ocToJs('loginSucceed', 'oc_tokenString');
  3、iOS用WKWebView的-evaluateJavaScript:completionHandler:方法执行拼接好的JS代码；
  3、JS在ocToJs方法中将iOS传过来的数据显示在div元素中；
  4、iOS通过completionHandler收到JS中ocToJs方法的回调。

PS：WKWebView的-evaluateJavaScript:completionHandler:方法可以执行JS代码。但只有在整个webView加载完成之后调使用此方法才会有响应。比方：我们可以通过如下方式获取JS的标题。

//! WKWebView在每次加载请求完成后会调使用此方法- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {        [webView evaluateJavaScript:@"document.title" completionHandler:^(NSString *title, NSError *error) {        self.title = title;    }];}

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

续篇：iOS与JS交互之WKWebView-WKScriptMessageHandler协议

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

推荐文章：
不一样的React context