iOS和JS交互教程之WKWebView-协议拦截的示例分析-创新互联

小编给大家分享一下iOS和JS交互教程之WKWebView-协议拦截的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

专业从事网站设计制作、成都做网站,高端网站制作设计,微信小程序,网站推广的成都做网站的公司。优秀技术团队竭力真诚服务，采用html5+CSS3前端渲染技术，响应式网站建设，让网站在手机、平板、PC、微信下都能呈现。建站过程建立专项小组，与您实时在线互动，随时提供解决方案，畅聊想法和感受。

相比与 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代码：

//! 登录按钮
登录

//! 登录
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数据显示框
 

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