简介: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 navigationDelegate;
//主要负责一些弹出框是否弹出
@property (nullable, nonatomic, weak) id 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> *)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..postMessage()获取和传递
- (void)addScriptMessageHandler:(id )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 * _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)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 )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.
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管理看我就够