iOS学习笔记 — WKWebView的使用

使用WKWebView需要引入头文件

#import <WebKit/WebKit.h>

初始化

/**
创建WKWebView
*/
- (WKWebView *)webViewWithSuperView:(UIView *)superView requestURLStr:(NSString *)requestStr target:(id)target andMasonryBlock:(MasonryBlock)masonryBlock
{
    WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
    config.mediaTypesRequiringUserActionForPlayback = false;
    
    WKWebView *webView = [[WKWebView alloc] initWithFrame:CGRectZero configuration:config];
    [superView addSubview:webView];
    webView.allowsBackForwardNavigationGestures = YES;//开启了支持滑动返回
    webView.scrollView.bounces = NO;
    webView.UIDelegate = target;
    webView.navigationDelegate = target;
    
    NSURL *url = [NSURL URLWithString:requestStr];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [webView loadRequest:request];
    
    if (masonryBlock) {
        [webView mas_makeConstraints:^(MASConstraintMaker *make) {
            masonryBlock(make);
        }];
    }
    return webView;
}

获取WKWebView的网页内容高度

获取WKWebView的网页内容高度的方法在WKNavigationDelegate里：

#pragma mark - WKNavigationDelegate
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{
    
    [webView evaluateJavaScript:@"document.body.scrollHeight" completionHandler:^(id _Nullable data, NSError * _Nullable error) {

        self.webViewHeight = [data floatValue];

        [self.myTableView reloadSections:[NSIndexSet indexSetWithIndex:0] withRowAnimation:UITableViewRowAnimationNone];
    }];
}

如果通过该方法获取网页高度，发现HTML5字体内容变小，可以通过向网页内容中注入JS代码（亲测有效）解决。

改变一下WKWebView的初始化方法：

NSString *source = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";
    WKUserScript *userScript = [[WKUserScript alloc] initWithSource:source injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
    WKUserContentController *contentController = [[WKUserContentController alloc] init];
    [contentController addUserScript:userScript];
    WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
    config.userContentController = contentController;
    WKWebView *webView = [[WKWebView alloc] initWithFrame:CGRectZero configuration:config];

WKWebView显示JS的弹窗

WKWebView不像UIWebView一样会显示JS的弹窗，显示JS弹窗的方法在WKUIDelegate里：

#pragma mark - WKUIDelegate
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler{
    //我这里使用第三方HUD展示弹窗内容
    if ([HELPER isBlankString:message] == NO) {
        [HELPER showText:message statusType:TextStatusTypeMidden];
    }
    
    completionHandler();
}

WKNavigationDelegate

- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation
{
    [HELPER progressHUDWithText:@"加载中" inView:self.view];
}

- (void)webView:(WKWebView *)webView didFailNavigation:(WKNavigation *)navigation withError:(NSError *)error
{
    [HELPER hideHUDForView:self.view];
}

- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation
{
    [HELPER hideHUDForView:self.view];
}

WKWebView与JS的交互

1.JS调用Objective-C的方法：

首先需要在viewWillAppear方法里添加ScriptMessageHandler，并指定方法名，例如“share”。还需要在viewWillDisappear里移除Handler。

- (void)viewWillAppear:(BOOL)animated{
    [super viewWillAppear:animated];
    
    [self.myWebView.configuration.userContentController addScriptMessageHandler:self name:@"Share"];
}

- (void)viewWillDisappear:(BOOL)animated{
    [super viewWillDisappear:animated];
    //这里要记得移除Handler
    [self.myWebView.configuration.userContentController removeScriptMessageHandlerForName:@"Share"];
}

JS调用Objective-C的方法在WKScriptMessageHandler里实现。

#pragma mark - WKScriptMessageHandler
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
    // "Share" 是监听交互的方法名
    if ([message.name isEqualToString:@"Share"]) {

        NSLog(@"%@",message.body);
    }
}

2.Objective-C调用JS的方法：

 // callJS()是JS方法名
[self.webView evaluateJavaScript:[NSString stringWithFormat:@"callJS('%@','%@')", @"Js参数",@"Js参数"] completionHandler:nil];