WKWebView相关整理篇

阅读量

之前有对hybrid交互方式做了一个相关的总结，也有对UIWebView相关做了整理，相关文章如下：

花了点时间，将WKWebView做了一下整理。

1. 优点

WKWebView相比于UIWebView来说，主要有以下几个优点

  • 性能上更优秀
  • 与Safari相同的JS引擎
  • 代理方法拆分更细，同时还提供了获取加载进度estimatedProgress

2. 基本用法

WKWebView的创建方法有这两种

1
2
- (instancetype)initWithFrame:(CGRect)frame configuration:(WKWebViewConfiguration *)configuration NS_DESIGNATED_INITIALIZER;
- (nullable instancetype)initWithCoder:(NSCoder *)coder NS_DESIGNATED_INITIALIZER;

这里的configuration配置很重要，可以配置js是否支持，画中画是否开启等，这里主要讲两个比较常用的属性。

  • websiteDataStore

    用来存储WKWebView相关缓存数据的，具体增删改查就可以通过WKWebsiteDataStore.h中提供的方法，这里不多说，一般用的时候比较少，真的要清除缓存，简单粗暴的方法是删除沙盒目录中的Cache文件夹。

  • userContentController

    js和oc的交互，以及注入js代码都会用到它，查看WKUserContentController的头文件，你会发现它有如下几个方法：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    @interface WKUserContentController : NSObject <NSCoding>
    //读取添加过的脚本
    @property (nonatomic, readonly, copy) NSArray<WKUserScript *> *userScripts;
    //添加脚本
    - (void)addUserScript:(WKUserScript *)userScript;
    //删除所有添加的脚本
    - (void)removeAllUserScripts;
    //通过window.webkit.messageHandlers.<name>.postMessage(<messageBody>) 来实现js->oc传递消息，并添加handler
    - (void)addScriptMessageHandler:(id <WKScriptMessageHandler>)scriptMessageHandler name:(NSString *)name;
    //删除handler
    - (void)removeScriptMessageHandlerForName:(NSString *)name;
    @end

    通过给userContentController添加WKUserScript，可以实现动态注入js。比如注入一个脚本

    1
    2
    3
    //注入一个Cookie
    WKUserScript *newCookieScript = [[WKUserScript alloc] initWithSource:@"document.cookie = 'DarkAngelCookie=DarkAngel;'" injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:NO];
    [controller addUserScript:newCookieScript];

加载一个请求或者页面，如下：

1
2
3
4
- (nullable WKNavigation *)loadRequest:(NSURLRequest *)request;
- (nullable WKNavigation *)loadFileURL:(NSURL *)URL allowingReadAccessToURL:(NSURL *)readAccessURL API_AVAILABLE(macosx(10.11), ios(9.0));
- (nullable WKNavigation *)loadHTMLString:(NSString *)string baseURL:(nullable NSURL *)baseURL;
- (nullable WKNavigation *)loadData:(NSData *)data MIMEType:(NSString *)MIMEType characterEncodingName:(NSString *)characterEncodingName baseURL:(NSURL *)baseURL API_AVAILABLE(macosx(10.11), ios(9.0));

代理方面，提供了两个代理

  • WKNavigationDelegate 类似于UIWebView的加载成功、失败、是否允许跳转等
  • WKUIDelegate 主要是一些alert、打开新窗口之类的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//下面这2个方法共同对应了UIWebView的 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;
//先：针对一次action来决定是否允许跳转，action中可以获取request，允许与否都需要调用decisionHandler，比如decisionHandler(WKNavigationActionPolicyCancel);
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler；
//后：根据response来决定，是否允许跳转，允许与否都需要调用decisionHandler，如decisionHandler(WKNavigationResponsePolicyAllow);
- (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler;

//开始加载，对应UIWebView的- (void)webViewDidStartLoad:(UIWebView *)webView;
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(null_unspecified WKNavigation *)navigation;

//加载成功，对应UIWebView的- (void)webViewDidFinishLoad:(UIWebView *)webView;
- (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigation *)navigation;

//加载失败，对应UIWebView的- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error;
- (void)webView:(WKWebView *)webView didFailNavigation:(null_unspecified WKNavigation *)navigation withError:(NSError *)error;

属性方面，WKWebView.h定义了如下几个常用的readonly属性：

1
2
3
4
5
6
@property (nullable, nonatomic, readonly, copy) NSString *title;    //页面的title，终于可以直接获取了
@property (nullable, nonatomic, readonly, copy) NSURL *URL;     //当前webView的URL
@property (nonatomic, readonly, getter=isLoading) BOOL loading; //是否正在加载
@property (nonatomic, readonly) double estimatedProgress;   //加载的进度
@property (nonatomic, readonly) BOOL canGoBack; //是否可以后退，跟UIWebView相同
@property (nonatomic, readonly) BOOL canGoForward;  //是否可以前进，跟UIWebView相同

这些属性都很有用，而且支持KVO，所以我们可以通过KVO观察这些值的变化，以便于我们做出最友好的交互。

3. WKWebView中js与oc的交互

3.1 OC调用JS

WKWebView提供了一个类似JavaScriptCore的方法：evaluateJavaScript，这个和UIWebView一样的

1
2
3
[self.webView evaluateJavaScript:@"document.title" completionHandler:^(id _Nullable title, NSError * _Nullable error) {
        NSLog(@"调用evaluateJavaScript异步获取title：%@", title);
}];

可以参考之前写的UIWebView相关整理篇，就不多说了。

3.2 JS调用oc

3.2.1 假跳转的请求拦截的方式

和UIWebView的拦截方式一样的，只不过走的代理方法不同而已。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    //可以通过navigationAction.navigationType获取跳转类型，如新链接、后退等
    NSURL *URL = navigationAction.request.URL;
    //判断URL是否符合自定义的URL Scheme
    if ([URL.scheme isEqualToString:@"darkangel"]) {
        //根据不同的业务，来执行对应的操作，且获取参数
        if ([URL.host isEqualToString:@"smsLogin"]) {
            NSString *param = URL.query;
            NSLog(@"短信验证码登录, 参数为%@", param);
            decisionHandler(WKNavigationActionPolicyCancel);
            return;
        }
    }
    decisionHandler(WKNavigationActionPolicyAllow);
    NSLog(@"%@", NSStringFromSelector(_cmd));
}

该方案的具体优缺点，以及回调的问题，和UIWebView里是一样的，这里也不多说了，可以参考之前写的UIWebView相关整理篇

3.2.2 弹框拦截
  • alert()：alert框
  • prompt()：文本输入框
  • confirm()：确认框

JS端在调用弹框方法的时候，会触发WKWebView中对应的弹框代理回调

1
2
3
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler;
- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler;
- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * _Nullable result))completionHandler;

注意：如果对应代理方法默认不写的话，是不会响应对应的弹框的

1
2
3
4
5
6
7
8
9
10
#pragma mark - WKUIDelegate
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler
{
    UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"提醒" message:message preferredStyle:UIAlertControllerStyleAlert];
    [alert addAction:[UIAlertAction actionWithTitle:@"知道了" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
        completionHandler();
    }]];
    
    [self presentViewController:alert animated:YES completion:nil];
}

其中completionHandler这个block 一定得调用，至于在哪里调用，倒是无所谓，我们也可以写在方法实现的第一行，或者最后一行。

在这里，当js调用了弹框，我们在对应的弹框代理中可以获取到js传递过来的相关参数，然后根据这些参数做操作。

在第三方库DSBridge中，其实交互思路就是根据弹框来做的，并且提供了同步异步交互，弹框的本质就是同步，在DSBridge中直接主线程执行返回的，而异步的话，DSBridge中其实是放在一个子线程里做了个延迟执行，然后通过OC中弹框的Block来调用JS的callBack进行回调。

3.2.3 注入的方式

苹果scriptMessageHandler注入

1
2
3
- (void)addScriptMessageHandler:(id <WKScriptMessageHandler>)scriptMessageHandler name:(NSString *)name;

- (void)removeScriptMessageHandlerForName:(NSString *)name;

具体使用方式：

在oc中注入添加handler

1
2
//配置对象注入
[self.webView.configuration.userContentController addScriptMessageHandler:self name:@"nativeObject"];

在js中调用

1
2
3
4
5
6
7
8
//准备要传给native的数据，包括指令，数据，回调等
var data = {
    action:'xxxx',
    params:'xxxx',
    callback:'xxxx',
};
//传递给客户端
window.webkit.messageHandlers.nativeObject.postMessage(data);

此时在oc中会触发回调的delegate

1
2
3
4
5
6
7
8
9
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    if ([message.name isEqualToString:@"nativeObject"]) {
        //1 解读JS传过来的JSValue  data数据
         NSDictionary *msgBody = message.body;
        //2 取出指令参数，确认要发起的native调用的指令是什么
        //3 取出数据参数，拿到JS传过来的数据
        //4 根据指令调用对应的native方法，传递数据
    }
}

当然，记得在适当的地方调用removeScriptMessageHandler

1
2
3
4
- (void)dealloc {
    //记得移除
    [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"nativeObject"];
}

这里又涉及到了一些问题

  • js如何获取返回值
  • 通过window.webkit.messageHandlers..postMessage()传递的messageBody中不能包含js的function，如果包含了function，那么 OC端将不会收到回调。

之前在UIWebView整理中，其实也提过这个回调，主要是通过执行js的callBack，但是在这里第二个问题中，我们可以把js的function转换为字符串，再传递给OC。

场景：h5中有一个分享按钮，用户点击之后，调用native分享（微信分享、微博分享等），在native分享成功或者失败时，回调h5页面，告诉其分享结果，h5页面刷新对应的UI，显示分享成功或者失败。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/**
 * 分享方法，并且会异步回调分享结果
 * @param  {对象类型} shareData 一个分享数据的对象，包含title,imgUrl,link以及一个回调function
 * @return {void}  无同步返回值
 */
function shareNew(shareData) {
  
  //这是该方法的默认实现，上篇文章中有所提及
  var title = shareData.title;
  var imgUrl = shareData.imgUrl;
  var link = shareData.link;
  var result = shareData.result;
  //do something
  //这里模拟异步操作
  setTimeout(function() {
      //2s之后，回调true分享成功
      result(true);
  }, 2000);

  //用于WKWebView，因为WKWebView并没有办法把js function传递过去，因此需要特殊处理一下
  //把js function转换为字符串，oc端调用时 (<js function string>)(true); 即可
  shareData.result = result.toString();
  window.webkit.messageHandlers.shareNew.postMessage(shareData);
}

function test() {
   //清空分享结果
  shareResult.innerHTML = "";
  
  //调用时，应该
  shareNew({
      title: "title",
      imgUrl: "http://img.dd.com/xxx.png",
      link: location.href,
      result: function(res) {
          //这里shareResult 等同于 document.getElementById("shareResult")
          shareResult.innerHTML = res ? "success" : "failure";
      }
  });
}

在oc中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//首先别忘了，在configuration中的userContentController中添加scriptMessageHandler
[controller addScriptMessageHandler:self name:@"shareNew"]; //记得适当时候remove哦


//点击a标签时，则会调用下面的方法
#pragma mark - WKScriptMessageHandler 

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    if ([message.name isEqualToString:@"shareNew"]) {
        NSDictionary *shareData = message.body;
        NSLog(@"shareNew分享的数据为： %@", shareData);
        //模拟异步回调
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(4 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            //读取js function的字符串
            NSString *jsFunctionString = shareData[@"result"];
            //拼接调用该方法的js字符串
            NSString *callbackJs = [NSString stringWithFormat:@"(%@)(%d);", jsFunctionString, NO];    //后面的参数NO为模拟分享失败
            //执行回调
            [self.webView evaluateJavaScript:callbackJs completionHandler:^(id _Nullable result, NSError * _Nullable error) {
                if (!error) {
                    NSLog(@"模拟回调，分享失败");
                }
            }];
        });
    }
}

赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码
本站总访问量次

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

<br><br>目前就职于比心陪练<br>iOS开发<br><br>能力一般，水平有限<br>待秋实果茂，与君共勉。