iOS WKWebVeiw简单介绍及使用过程遇到问题总结

作者: 洁简 | 来源:发表于2018-04-20 18:42 被阅读146次

简介:WKWebView是iOS8.0苹果推出的新框架Wekkit中的核心控件,它的出现就是为了解决UIWebView的各种问题,在实际运用中也明显感受到了它的优势.

基本使用:

WKWebView基本和UIWebView差不多,我们可以用来加载HTML,TXT,PDF,doc等文件,当然更常用的还是加载web页面.
加载文件:
加载文件我们可以直接初始化它的frame即可
WKWebView给出的加载方式有四种,例:

//将文件转为data的方式进行加载,使用时需要注意不同格式的mimeType要对应,而且是iOS9后才有的
[web loadData:data MIMEType:mimeType characterEncodingName:@"UTF-8" baseURL:url];
//最常用的方式
[web loadRequest:request];
//用来加载HTML语言
[web loadHTMLString:htmlString baseURL:nil];
//以URL的方式加载注意iOS9后的
[web loadFileURL:url allowingReadAccessToURL:url];

经测试发现加载不同文件格式要使用不同的方法,不然会出现加载失败或者乱码的问题.具体可见Demo
加载网页:
初始化我们往往会用到

//初始化
- (instancetype)initWithFrame:(CGRect)frame configuration:(WKWebViewConfiguration *)configuration

利用WKWebViewConfiguration我们可以进行设置,其中配置属性主要有

//内容加载池,可以在多个webview上设置同一个WKProcessPool来共享cookie等
@property (nonatomic, strong) WKProcessPool *processPool;
//可以配置javaScript一些属性,如minimumFontSize设置最小字体
@property (nonatomic, strong) WKPreferences *preferences;
//主要用来与原生交互的
@property (nonatomic, strong) WKUserContentController *userContentController;
//存储数据iOS9以后
@property (nonatomic, strong) WKWebsiteDataStore *websiteDataStore;
//设置是否使用内联播放器播放视频
@property (nonatomic) BOOL allowsInlineMediaPlayback;
//iOS10后 是否允许自动播放
@property (nonatomic) WKAudiovisualMediaTypes mediaTypesRequiringUserActionForPlayback;
//是否允许web页面的缩放
@property (nonatomic) BOOL ignoresViewportScaleLimits;

另外WKWebView本身也可以设置或读取一些属性

//导航代理,加载成功,失败允许跳转等
@property (nullable, nonatomic, weak) id <WKNavigationDelegate> navigationDelegate;
//主要负责一些弹出框是否弹出
@property (nullable, nonatomic, weak) id <WKUIDelegate> UIDelegate;
//当前页面标题
@property (nullable, nonatomic, readonly, copy) NSString *title;
//当前页面的URL
@property (nullable, nonatomic, readonly, copy) NSURL *URL;
//是否正在加载
@property (nonatomic, readonly, getter=isLoading) BOOL loading;
//加载进度
@property (nonatomic, readonly) double estimatedProgress;
//是否通过安全加密链接加载
@property (nonatomic, readonly) BOOL hasOnlySecureContent;
//是否可以返回
@property (nonatomic, readonly) BOOL canGoBack;
//是否可以前进
@property (nonatomic, readonly) BOOL canGoForward;
//是否支持左右手势前进或后退
@property (nonatomic) BOOL allowsBackForwardNavigationGestures;
//是否允许链接3d touch  iOS9后
@property (nonatomic) BOOL allowsLinkPreview;
//设置UserAgent iOS9后
@property (nullable, nonatomic, copy) NSString *customUserAgent;

WKNavigationDelegate里的方法简介

// 决定导航的动作，通常用于处理跨域的链接能否导航。WebKit对跨域进行了安全检查限制，不允许跨域，因此我们要对不能跨域的链接单独处理。但是，对于Safari是允许跨域的，不用这么处理。
// 这个是决定是否Request
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler;
// 决定是否接收响应
// 这个是决定是否接收response
// 要获取response，通过WKNavigationResponse对象获取
- (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler;
//开始加载
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(null_unspecified WKNavigation *)navigation;
//接收到服务重定向时，会回调此方法或接收到服务器跳转请求之后调用
- (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(null_unspecified WKNavigation *)navigation;
//加载数据失败时，会回调
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(null_unspecified WKNavigation *)navigation withError:(NSError *)error;
//web内容开始返回时调用
- (void)webView:(WKWebView *)webView didCommitNavigation:(null_unspecified WKNavigation *)navigation;
//页面加载完成
- (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigation *)navigation;
//页面加载失败
- (void)webView:(WKWebView *)webView didFailNavigation:(null_unspecified WKNavigation *)navigation withError:(NSError *)error;
//对于HTTPS的都会触发此代理，如果不要求验证，传默认就行
 如果需要证书验证，与使用AFN进行HTTPS证书验证是一样的 
- (void)webView:(WKWebView *)webView didReceiveAuthenticationChallenge:(NSURLAuthenticationChallenge *)challenge completionHandler:(void (^)(NSURLSessionAuthChallengeDisposition disposition, NSURLCredential * _Nullable credential))completionHandler;
//当 WKWebView 总体内存占用过大，页面即将白屏的时候，系统会调用上面的回调函数，我们在该函数里执行[webView reload](这个时候 webView.URL 取值尚不为 nil）解决白屏问题。在一些高内存消耗的页面可能会频繁刷新当前页面，H5侧也要做相应的适配操作。
- (void)webViewWebContentProcessDidTerminate:(WKWebView *)webView;

WKUIDelegate方法简介

// 创建新的webview
// 可以指定配置对象、导航动作对象、window特性
- (nullable WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures;
//webview关闭时回调注意iOS9后
- (void)webViewDidClose:(WKWebView *)webView
////当把JS返回给控制器,然后弹窗就是这样设计的
- (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;
//支持预览 也就是3D Touch
- (BOOL)webView:(WKWebView *)webView shouldPreviewElement:(WKPreviewElementInfo *)elementInfo API_AVAILABLE(ios(10.0));
- (nullable UIViewController *)webView:(WKWebView *)webView previewingViewControllerForElement:(WKPreviewElementInfo *)elementInfo defaultActions:(NSArray<id <WKPreviewActionItem>> *)previewActions API_AVAILABLE(ios(10.0));
- (void)webView:(WKWebView *)webView commitPreviewingViewController:(UIViewController *)previewingViewController API_AVAILABLE(ios(10.0));

与原生交互

通过各种配置后就可以显示web,另外就需要交互了.
先说oc->js传递参数

//可以直接执行js代码
- (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))completionHandler;
//例:直接获取到title
[self.webView evaluateJavaScript:@"document.title" completionHandler:^(id _Nullable title, NSError * _Nullable error) {
        NSLog(@"title：%@", title);
}];

oc向js传递参数相对比较简单,js->oc相对麻烦一些

//直接添加一个handle,和name.这样js就可以通过window.webkit.messageHandlers.<name>.postMessage(<messageBody>)获取和传递
- (void)addScriptMessageHandler:(id <WKScriptMessageHandler>)scriptMessageHandler name:(NSString *)name;

例如:

[controller addScriptMessageHandler:self name:@"takeUserImage"];
js则可以通过方法传递数据
window.webkit.messageHandlers.takeUserImage.postMessage(null);

然后我们可以在代理方法获取数据

- (void)userContentController:(WKUserContentController *)userContentController
      didReceiveScriptMessage:(WKScriptMessage *)message {
    NSLog(@"%@", message);
    if ([message.name isEqualToString:@"takeUserImage"]) {
        
    }
}

以上基本完成了web的大部分功能.但是在实际运用时会遇到各种问题和坑等着我们来填.
自己在实际中遇到的问题进行了总结:
首先是与js交互时我们用到

[controller addScriptMessageHandler:self name:@"takeUserImage"];

如果我们直接这样写,dealloc不会走.
解决方法就是新建一个Controller来完成WKScriptMessageHandler代理方法:

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
    if ([self.delegate respondsToSelector:@selector(userContentController:didReceiveScriptMessage:)]) {
        [self.delegate userContentController:userContentController didReceiveScriptMessage:message];
    }
}

这样我们在dealloc中不要忘记

[self.userContentController removeScriptMessageHandlerForName:@"takeUserImage"];

使用本地图片问题

使用本地图片,例如我们在需要选取相册的图片提供给js使用.我们可以用如下的方式
1.将图片上传到公司服务器,然后得到图片地址后将地址直接传给js使用.这种方式感觉比较笨.
2.将图片保存到本地的沙盒中,注意必须是tmp目录不然还是获取不到,如下

NSString *path_document = NSHomeDirectory();
    NSString *imagePath = [path_document stringByAppendingString:@"/tmp/mychoose.jpg"];
    NSData *imageData = UIImageJPEGRepresentation(image, 0.25);
    [imageData writeToFile:imagePath atomically:YES];

这样js就可以通过imagePath来获取本地图片了
3.还可以将图片转为data然后转为base64直接传给js使用具体可见demo
以上解决了使用本地图片的问题

Cookie管理问题

这个应该是WKWebView最大的问题了,这个问题会让不少人放弃使用.
总结来说设置Cookie有3种方式
1.request设置Cookie

[request setValue:@"hq_http_usertoken=GojvvmpfnXXAQ6/HxBfMIQFJhWXOBYQfzhWCHpRABtI=;domain=hq-app-dev.io" forHTTPHeaderField:@"Cookie"];

2.WKUserScript设置

WKUserScript *cookieScript = [[WKUserScript alloc] initWithSource: @"document.cookie='hq_http_usertoken=GojvvmpfnXXAQ6/HxBfMIQFJhWXOBYQfzhWCHpRABtI=;domain=hq-app-dev.zhongan.io;path=/'; "injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:NO];

3.直接js注入

[webView evaluateJavaScript:@"document.cookie = 'hq_http_usertoken=GojvvmpfnXXAQ6/HxBfMIQFJhWXOBYQfzhWCHpRABtI=;domain=hq-app-dev.zhongan.io;path=/'" completionHandler:^(id result, NSError *error) {
        NSLog(@"%@%@",result,error);
    }];

由于公司APP的Cookie是和js公用的所以遇到的问题并不是特别多.如果以后出现其他问题会及时更新.

iOS11带来的更新

在iOS11上新增的WKHTTPCookieStore使我们可以更方面的设置Cookie了
我们可以设置Cookie:

NSMutableDictionary *fromappDict = [NSMutableDictionary dictionary];
        [fromappDict setObject:@"hq_http_usertoken" forKey:NSHTTPCookieName];
        [fromappDict setObject:@"GojvvmpfnXXAQ6/HxBfMIQFJhWXOBYQfzhWCHpRABtI=" forKey:NSHTTPCookieValue];
        [fromappDict setObject:@"hq-app-dev.baidu.io" forKey:NSHTTPCookieDomain];
        [fromappDict setObject:@"https://hq-app-dev.baidu.io" forKey:NSHTTPCookieOriginURL];
        [fromappDict setObject:@"/" forKey:NSHTTPCookiePath];
        [fromappDict setObject:@"0" forKey:NSHTTPCookieVersion];
        NSHTTPCookie *cookie = [NSHTTPCookie cookieWithProperties:fromappDict];
        [configuration.websiteDataStore.httpCookieStore setCookie:cookie completionHandler:^{

        }];

获取cookies

[webView.configuration.websiteDataStore.httpCookieStore getAllCookies:^(NSArray<NSHTTPCookie *> * _Nonnull cookies) {
            NSLog(@"%@",cookies);
        }];

删除cookie

[webView.configuration.websiteDataStore.httpCookieStore deleteCookie:cookie completionHandler:^{
        NSLog(@"delete cookie");
    }];

WKContentRuleListStore内容过滤
它可以根据我们的配置进行过滤如图片的加载详解可见WKWebView内容过滤规则详解
新增方法setURLSchemeHandler可以直接使用本地资源如assets资源里面的图片
代理方法有

//开始加载特定资源时调用
- (void)webView:(nonnull WKWebView *)webView startURLSchemeTask:(nonnull id<WKURLSchemeTask>)urlSchemeTask {
    NSString *str = urlSchemeTask.request.URL.absoluteString;
    UIImage *image = [UIImage imageNamed:[self getImageName:str]];
    NSData *imageData = UIImageJPEGRepresentation(image, 0.5);
    NSURLResponse *response = [[NSURLResponse alloc] initWithURL:urlSchemeTask.request.URL MIMEType:@"image/jpeg" expectedContentLength:imageData.length textEncodingName:nil];
    [urlSchemeTask didReceiveResponse:response];
    [urlSchemeTask didReceiveData:imageData];
    [urlSchemeTask didFinish];
}
//停止载特定资源时调用
- (void)webView:(WKWebView *)webView stopURLSchemeTask:(id <WKURLSchemeTask>)urlSchemeTask;

WebViewJavascriptBridge GitHub地址第三方实现交互
大致原理:

1.分别在OC环境和javascript环境都保存一个bridge对象，里面维持着requestId,callbackId,以及每个id对应的具体实现。
2.OC通过javascript环境的window.WebViewJavascriptBridge对象来找到具体的方法，然后执行。
3.javascript通过改变iframe的src来出发webview的代理方法webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler
从而实现把javascript消息发送给OC这个功能。

初始化:

if (_bridge) { return; }
[WebViewJavascriptBridge enableLogging];    
_bridge = [WebViewJavascriptBridge bridgeForWebView:webView];
[_bridge setWebViewDelegate:self];

JS调用OC方法:先注册事件,然后响应

    /*
     含义：JS调用OC
     @param registerHandler 要注册的事件名称(比如这里我们为loginAction)
     @param handel 回调block函数 当后台触发这个事件的时候会执行block里面的代码
     */
    [_bridge registerHandler:@"chooseAddress" handler:^(id data, WVJBResponseCallback responseCallback) {
        // data js页面传过来的参数
        NSLog(@"JS调用OC，并传值过来");
        
        // 利用data参数处理自己的逻辑
        NSDictionary *dict = (NSDictionary *)data;
        NSLog(@"%@",dict);
        // responseCallback 给js的回复
        responseCallback(@"oc已收到js的请求");
    }];

OC调用JS:JS需要先注册,oc响应

/*
含义：OC调用JS
@param callHandler 商定的事件名称,用来调用网页里面相应的事件实现
@param data id类型,相当于我们函数中的参数,向网页传递函数执行需要的参数
注意，这里callHandler分3种，根据需不需要传参数和需不需要后台返回执行结果来决定用哪个
*/
//如果不需要参数，不需要回调，使用这个
//    [_webViewBridge callHandler:@"testJSFunction"];
//如果需要参数，不需要回调，使用这个
//    [_webViewBridge callHandler:@"testJSFunction" data:@"一个字符串"];
// 如果既需要参数，又需要回调，使用这个
[_bridge callHandler:@"testJSFunction" data:@"一个字符串" responseCallback:^(id responseData) {
    NSLog(@"调用完JS后的回调：%@",responseData);
}];

JS需要的代码

<!--  申明交互 固定代码-->
function setupWebViewJavascriptBridge(callback) {
    if (window.WebViewJavascriptBridge) { 
        return callback(WebViewJavascriptBridge); 
    }
    if (window.WVJBCallbacks) { 
        return window.WVJBCallbacks.push(callback); 
    }
    window.WVJBCallbacks = [callback];
    var WVJBIframe = document.createElement('iframe');
    WVJBIframe.style.display = 'none';
    WVJBIframe.src = 'https://__bridge_loaded__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}

JS注册方法:

<!--处理交互 方法名字一致-->
  setupWebViewJavascriptBridge(function(bridge) {
//把WEB中要注册的方法注册到bridge里面
      bridge.registerHandler('testJSFunction', function(data, responseCallback) {
          alert('JS方法被调用:'+data);
          responseCallback('js执行过了');
    })
  })

JS调用原生方法:

WebViewJavascriptBridge.callHandler('chooseAddress', {'address': '中国'}, function(response) {
    alert('返回数据:' + response);
})

xcode打印console.log

首先增加交互方法

[user addScriptMessageHandler:self.interface name:@"logging"];

首先在加载完成后注入方法

//DEBUG环境下打印
if (DEBUG) {
        NSString * js = @"var console = {};console.log = function(message){window.webkit.messageHandlers.logging.postMessage(message)};";
        [self.webView evaluateJavaScript:js completionHandler:^(id _Nullable result, NSError * _Nullable error) {
            NSLog(@"%@----%@",result, error);
        }];
    }

最后在以下方法获取打印内容

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    if ([message.name isEqualToString:@"logging"]) {
        NSLog(@"H5 log: %@", message.body);
        return;
    }
}

使用中遇到的问题

1.webview.scrollView.contentInsetAdjustmentBehavior 的值默认竟然是3也就是UIScrollViewContentInsetAdjustmentAlways,导致了页面在没有导航的时候页面会在状态栏以下布局,但是如果改成UIScrollViewContentInsetAdjustmentNever的话布局是没有问题了,但是又会导致h5界面在有很多表单的时候键盘遮挡输入框,因此还是需要改用webview.scrollView.contentInsetAdjustmentBehavior,另外需要自定义安全区域

//这句话还是需要写上,虽然默认值是UIScrollViewContentInsetAdjustmentAlways,但是并不起作用还不知道为何
webview.scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentAlways;
CGFloat stateHeight = [[UIApplication sharedApplication] statusBarFrame].size.height;
self.navigationController.additionalSafeAreaInsets = UIEdgeInsetsMake(-stateHeight, 0, 0, 0);

2.window.webkit.messageHandlers.<name>.postMessage(<messageBody>)后面参数一定不能为空
3.cookie偶尔丢失
由于新开的webview也需要设置cookie,但是在设置的时候如果使用iOS11后提供的方法会出现偶尔设置失败的情况大概有10%的概率.
解决办法:(1).共用同一个 WKWebViewConfiguration
(2).WKWebViewConfiguration 初始化的时候设置

configuration.websiteDataStore = [WKWebsiteDataStore nonPersistentDataStore];

也就是非持续行存储,这样也满足了新开页面的需求.但是这样导致加载的时候明显慢了一些.
但是后来发现这样导致h5无法获取和设置cookie和一些奇怪的问题.因此放弃了此方法.
(3).最后整理思路其实无非就是打开web也要用一样的cookie也就是公用cookie.这样其实我们公用同一个WKProcessPool即可.
4.webview在含有视频全屏播放返回后导致状态栏消失
解决办法:监听UIWindow隐藏

[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(endFullScreen) name:UIWindowDidBecomeHiddenNotification object:nil];

然后再监听后的方法主动显示状态栏:注意这种是在View controller-based status bar appearance为NO的情况下使用

[[UIApplication sharedApplication] setStatusBarHidden:NO withAnimation:UIStatusBarAnimationNone];

参考文章:iOS开发WKWebView Cookie的读取与写入
 iOS WebView 中的 Cookie 处理业务场景“IP直连”方案说明
 WKWebView 那些坑
 iOS中UIWebView与WKWebView、JavaScript与OC交互、Cookie管理看我就够

iOS WKWebVeiw简单介绍及使用过程遇到问题总结

基本使用:

与原生交互

使用本地图片问题

Cookie管理问题

iOS11带来的更新

xcode打印console.log

使用中遇到的问题

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

iOS Fra...