iOS和JS交互教程之WKWebView-协议拦截详解

概述iOS和JS交互教程之WKWebView-协议拦截详解 前言 由于Xcode8发布之后,编译器开始不支持iOS 7了,这样我们的app也改为最低支持iOS 8.0,既然需要与web交互,那自然也就选择使用了 iOS 8.0之后 才推出的新控件 WKWebView. 相比与 UIWebView, WKWebView 存在很多优势: 支持更多的HTML5的特性 高达60fps滚动刷新频率与内置手势 与Safari相容的JavaScript引擎 在性能.稳定性方面有很大提升占用内存更少 协议方法及功能都更细致 可获取加载进度等. 先解释下标题:" ...

前言

由于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);}//! 加载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-协议拦截详解全部内容，希望文章能够帮你解决iOS和JS交互教程之WKWebView-协议拦截详解所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。