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

时间:2021-05-20

前言

由于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获取工程源码(本地下载)

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章