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

2020-01-21 07:00:03刘景俊

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;
  }];
}