iOS和JS交互教程之WKWebView-协议拦截详解
前言
由于Xcode8发布之后，编译器开始不支持iOS 7了，这样我们的app也改为最低支持iOS 8.0，既然需要与web交互，那自然也就选择使用了 iOS 8.0之后 才推出的新控件 WKWebView.
相比与 UIWebView, WKWebView 存在很多优势：
- 支持更多的HTML5的特性
- 高达60fps滚动刷新频率与内置手势
- 与Safari相容的JavaScript引擎
- 在性能、稳定性方面有很大提升占用内存更少 协议方法及功能都更细致
- 可获取加载进度等。
先解释下标题：“iOS与JS交互”。iOS指iOS原生代码（文章只有OC示例），JS指WEB前端（不单指JavaScript），交互指JS调用iOS和iOS调用JS。
本文介绍通过 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);
}
//! 加载URL
function 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;
}];
}
总结
上一篇：iOS中解决Xcode9的Log日志无法输出中文的问题小结
栏 目：iOS代码
下一篇：iOS拨打电话的3种实现方式
本文标题：iOS和JS交互教程之WKWebView-协议拦截详解
本文地址：http://www.codeinn.net/misctech/132358.html
