×
广告

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

96
QiShare
2018.09.01 22:03* 字数 880

级别:★★☆☆☆
标签:「iOS与JS交互」「WKWebView与JS交互」「WKWebView拦截协议」
作者: Xs·H
审校: QiShare团队

先解释下标题:“iOS与JS交互”。iOS指iOS原生代码(文章只有OC示例),JS指WEB前端(不单指JavaScript),交互指JS调用iOSiOS调用JS
作者将iOS与JS交互总结成了6种方式,并将逐一介绍。目录如下:


本文介绍通过 WKWebView协议拦截的方式实现iOSJS交互。
WKWebViewApple在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在登录成功后以loginSucceedoc_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与JS交互之WKWebView-WKScriptMessageHandler协议


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

推荐文章:
不一样的React context

iOS
Web note ad 1