前言

---

Xcode8发布以后，编译器开始不支持IOS7，所以很多应用在适配IOS10之后都不在适配IOS7了，其中包括了很多大公司，网易新闻，滴滴出行等。因此，我们公司的应用也打算淘汰IOS7。

支持到IOS8，第一个要改的自然是用WKWebView替换原来的UIWebView。WKWebView有很多明显优势:

• 更多的支持HTML5的特性

• 官方宣称的高达60fps的滚动刷新率以及内置手势

• 将UIWebViewDelegate与UIWebView拆分成了14类与3个协议,以前很多不方便实现的功能得以实现。

• Safari相同的JavaScript引擎

• 占用更少的内存

UIWebView

UIWebView

WKWebView

WKWebView

因此，使用WkWebview替换UIWebView还是很有必要的。

基本使用方法

---

WKWebView有两个delegate,WKUIDelegate 和 WKNavigationDelegate。WKNavigationDelegate主要处理一些跳转、加载处理操作，WKUIDelegate主要处理JS脚本，确认框，警告框等。因此WKNavigationDelegate更加常用。

比较常用的方法：

#pragma mark - lifeCircle- (void)viewDidLoad {    [super viewDidLoad];    webView = [[WKWebView alloc]init];    [self.view addSubview:webView]; [webView mas_makeConstraints:^(MASConstraintMaker *make) { make.left.equalTo(self.view); make.right.equalTo(self.view); make.top.equalTo(self.view); make.bottom.equalTo(self.view); }]; webView.UIDelegate = self; webView.navigationDelegate = self; [webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]]]; } #pragma mark - WKNavigationDelegate // 页面开始加载时调用 - (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation{ } // 当内容开始返回时调用 - (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation{ } // 页面加载完成之后调用 - (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{ } // 页面加载失败时调用 - (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation{ } // 接收到服务器跳转请求之后调用 - (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(WKNavigation *)navigation{ } // 在收到响应后，决定是否跳转 - (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler{ NSLog(@"%@",navigationResponse.response.URL.absoluteString); //允许跳转 decisionHandler(WKNavigationResponsePolicyAllow); //不允许跳转 //decisionHandler(WKNavigationResponsePolicyCancel); } // 在发送请求之前，决定是否跳转 - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler{ NSLog(@"%@",navigationAction.request.URL.absoluteString); //允许跳转 decisionHandler(WKNavigationActionPolicyAllow); //不允许跳转 //decisionHandler(WKNavigationActionPolicyCancel); } #pragma mark - WKUIDelegate // 创建一个新的WebView - (WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures{ return [[WKWebView alloc]init]; } // 输入框 - (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * __nullable result))completionHandler{ completionHandler(@"http"); } // 确认框 - (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler{ completionHandler(YES); } // 警告框 - (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler{ NSLog(@"%@",message); completionHandler(); }

OC与JS交互

---

WKWebview提供了API实现js交互 不需要借助JavaScriptCore或者webJavaScriptBridge。使用WKUserContentController实现js native交互。简单的说就是先注册约定好的方法，然后再调用。

JS调用OC方法

oc代码(有误，内存不释放):

@interface ViewController ()
    
     { WKWebView * webView; WKUserContentController* userContentController; } @end @implementation ViewController #pragma mark - lifeCircle - (void)viewDidLoad { [super viewDidLoad]; //配置环境 WKWebViewConfiguration * configuration = [[WKWebViewConfiguration alloc]init]; userContentController =[[WKUserContentController alloc]init]; configuration.userContentController = userContentController; webView = [[WKWebView alloc]initWithFrame:CGRectMake(0, 0, 100, 100) configuration:configuration]; //注册方法 [userContentController addScriptMessageHandler:self name:@"sayhello"];//注册一个name为sayhello的js方法 [self.view addSubview:webView]; [webView mas_makeConstraints:^(MASConstraintMaker *make) { make.left.equalTo(self.view); make.right.equalTo(self.view); make.top.equalTo(self.view); make.bottom.equalTo(self.view); }]; webView.UIDelegate = self; webView.navigationDelegate = self; [webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.test.com"]]]; } - (void)dealloc{ //这里需要注意，前面增加过的方法一定要remove掉。 [userContentController removeScriptMessageHandlerForName:@"sayhello"]; } #pragma mark - WKScriptMessageHandler - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{ NSLog(@"name:%@\\\\n body:%@\\\\n frameInfo:%@\\\\n",message.name,message.body,message.frameInfo); } @end
    

上面的OC代码如果认证测试一下就会发现dealloc并不会执行，这样肯定是不行的，会造成内存泄漏。原因是[userContentController addScriptMessageHandler:self name:@"sayhello"];这句代码造成无法释放内存。（ps:试了下用weak指针还是不能释放，不知道是什么原因。）因此还需要进一步改进，正确的写法是用一个新的controller来处理,新的controller再绕用delegate绕回来。

oc代码(正确写法):

@interface ViewController ()
    
     { WKWebView * webView; WKUserContentController* userContentController; } @end @implementation ViewController #pragma mark - lifeCircle - (void)viewDidLoad { [super viewDidLoad]; //配置环境 WKWebViewConfiguration * configuration = [[WKWebViewConfiguration alloc]init]; userContentController =[[WKUserContentController alloc]init]; configuration.userContentController = userContentController; webView = [[WKWebView alloc]initWithFrame:CGRectMake(0, 0, 100, 100) configuration:configuration]; //注册方法 WKDelegateController * delegateController = [[WKDelegateController alloc]init]; delegateController.delegate = self; [userContentController addScriptMessageHandler:delegateController name:@"sayhello"]; [self.view addSubview:webView]; [webView mas_makeConstraints:^(MASConstraintMaker *make) { make.left.equalTo(self.view); make.right.equalTo(self.view); make.top.equalTo(self.view); make.bottom.equalTo(self.view); }]; webView.UIDelegate = self; webView.navigationDelegate = self; [webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.test.com"]]]; } - (void)dealloc{ //这里需要注意，前面增加过的方法一定要remove掉。 [userContentController removeScriptMessageHandlerForName:@"sayhello"]; } #pragma mark - WKScriptMessageHandler - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{ NSLog(@"name:%@\\\\n body:%@\\\\n frameInfo:%@\\\\n",message.name,message.body,message.frameInfo); } @end
    

WKDelegateController代码：

#import 
    
     #import 
     
      @protocol WKDelegate 
      
        - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message; @end @interface WKDelegateController : UIViewController 
       
         @property (weak , nonatomic) id
        
          delegate; @end
        
       
      
     
    

.m代码：

#import "WKDelegateController.h"@interface WKDelegateController () @end @implementation WKDelegateController - (void)viewDidLoad { [super viewDidLoad]; } - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{ if ([self.delegate respondsToSelector:@selector(userContentController:didReceiveScriptMessage:)]) { [self.delegate userContentController:userContentController didReceiveScriptMessage:message]; } } @end

h5代码:

       
hello world
 say hello  

打印出的log：

name:sayhello body:{    body = "hello world!";} frameInfo:
    
      { URL: http://www.test.com/ }>
    

注意点

• addScriptMessageHandler要和removeScriptMessageHandlerForName配套出现，否则会造成内存泄漏。
• h5只能传一个参数，如果需要多个参数就需要用字典或者json组装。

---

oc调用JS方法

代码如下：

- (void)webView:(WKWebView *)tmpWebView didFinishNavigation:(WKNavigation *)navigation{    //say()是JS方法名，completionHandler是异步回调block    [webView evaluateJavaScript:@"say()" completionHandler:^(id _Nullable result, NSError * _Nullable error) { NSLog(@"%@",result); }]; }

h5代码同上。

WebViewJavascriptBridge

---

一般来说，一个好的UI总有一个大神会开发出一个好的第三方封装框架。WebViewJavascriptBridge的作者也做了一套支持WKWebView与JS交互的第三方框架:WKWebViewJavascriptBridge。

• cocoaPods: pod 'WebViewJavascriptBridge', '~> 5.0.5'

• github地址：

主要方法如下：

//初始化方法+ (instancetype)bridgeForWebView:(WKWebView*)webView;+ (void)enableLogging;//注册函数名- (void)registerHandler:(NSString*)handlerName handler:(WVJBHandler)handler; //调用函数名 - (void)callHandler:(NSString*)handlerName; - (void)callHandler:(NSString*)handlerName data:(id)data; - (void)callHandler:(NSString*)handlerName data:(id)data responseCallback:(WVJBResponseCallback)responseCallback; //重置 - (void)reset; //设置WKNavigationDelegate - (void)setWebViewDelegate:(id
    
     )webViewDelegate;
    

基本的实现方法和上面写的差不多，就是封装了一下，有兴趣的童鞋可以自己pod下来使用。

文／o翻滚的牛宝宝o（简书作者）

原文链接：http://www.jianshu.com/p/4fa8c4eb1316

著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。

 

 

 

iOS8之后，苹果推出了WebKit这个框架，用来替换原有的UIWebView，新的控件优点多多，不一一叙述。由于一直在适配iOS7，就没有去替换，现在仍掉了iOS7，以为很简单的就替换过来了，然而在替换的过程中，却遇到了很多坑。还有一点就是原来写过一篇文章 以为年代久远的UIWebView已经作古，可这篇文章现在依然有一定的阅读量。所以在决定在续一篇此文，以引导大家转向WKWebView，并指出自己踩过的坑，让大家少走弯路。

此篇文章的逻辑图

WKWebView使用

WKWebView简单介绍

使用及注意点

WKWebView只能用代码创建，而且自身就支持了右滑返回手势allowsBackForwardNavigationGestures和加载进度estimatedProgress等一些UIWebView不具备却非常好用的属性。在创建的时候，指定初始化方法中要求传入一个WKWebViewConfiguration对象，一般我们使用默认配置就好，但是有些地方是要根据自己的情况去做更改。比如，配置中的allowsInlineMediaPlayback这个属性，默认为NO，如果不做更改，网页中内嵌的视频就无法正常播放。

更改User-Agent

有时我们需要在User-Agent添加一些额外的信息，这时就要更改默认的User-Agent在使用UIWebView的时候，可用如下代码(在使用UIWebView之前执行)全局更改User-Agent：

 

 

1 2 3 4 5 6 7 8 9 10

// 获取默认User-Agent UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectZero]; NSString *oldAgent = [webView stringByEvaluatingJavaScriptFromString:@"navigator.userAgent"];   // 给User-Agent添加额外的信息 NSString *newAgent = [NSString stringWithFormat:@"%@;%@", oldAgent, @"extra_user_agent"];   // 设置global User-Agent NSDictionary *dictionnary = [[NSDictionary alloc] initWithObjectsAndKeys:newAgent, @"UserAgent", nil]; [[NSUserDefaults standardUserDefaults] registerDefaults:dictionnary];

以上代码是全局更改User-Agent，也就是说，App内所有的Web请求的User-Agent都被修改。替换为WKWebView后更改全局User-Agent可以继续使用上面的一段代码，或者改为用WKWebView获取默认的User-Agent，代码如下:

 

 

1 2 3 4 5 6 7 8 9 10 11 12 13

self.wkWebView = [[WKWebView alloc] initWithFrame:CGRectZero];   // 获取默认User-Agent [self.wkWebView evaluateJavaScript:@"navigator.userAgent" completionHandler:^(id result, NSError *error) {     NSString *oldAgent = result;       // 给User-Agent添加额外的信息     NSString *newAgent = [NSString stringWithFormat:@"%@;%@", oldAgent, @"extra_user_agent"];       // 设置global User-Agent     NSDictionary *dictionary = [NSDictionary dictionaryWithObjectsAndKeys:newAgent, @"UserAgent", nil];     [[NSUserDefaults standardUserDefaults] registerDefaults:dictionary]; }];

对比发现，这两种方法并没有本质的区别，一点小区别在于一个是用UIWebView获取的默认User-Agent，一个是用WKWebView获取的默认User-Agent。上面方法的缺点也是很明显的，就是App内所有Web请求的User-Agent全部被修改。

在iOS9，WKWebView提供了一个非常便捷的属性去更改User-Agent，就是customUserAgent属性。这样使用起来不仅方便，也不会全局更改User-Agent，可惜的是iOS9才有，如果适配iOS8，还是要使用上面的方法。

WKWebView的相关的代理方法

WKWebView的相关的代理方法分别在WKNavigationDelegate和WKUIDelegate以及WKScriptMessageHandler这个与JavaScript交互相关的代理方法。

• WKNavigationDelegate: 此代理方法中除了原有的UIWebView的四个代理方法，还增加了其他的一些方法，具体可参考我下面给出的Demo。
• WKUIDelegate: 此代理方法在使用中最好实现，否则遇到网页alert的时候，如果此代理方法没有实现，则不会出现弹框提示。
• WKScriptMessageHandler: 此代理方法就是和JavaScript交互相关，具体介绍参考下面的专门讲解。

WKWebView使用过程中的坑

WKWebView下面添加自定义View

因为我们有个需求是在网页下面在添加一个View，用来展示此链接内容的相关评论。在使用UIWebView的时候，做法非常简单粗暴，在UIWebView的ScrollView后面添加一个自定义View，然后根据View的高度，在改变一下scrollView的contentSize属性。以为WKWebView也可以这样简单粗暴的去搞一下，结果却并不是这样。

首先改变WKWebView的scrollView的contentSize属性，系统会在下一次帧率刷新的时候，再给你改变回原有的，这样这条路就行不通了。我马上想到了另一个办法，改变scrollView的contentInset这个系统倒不会在变化回原来的，自以为完事大吉。后来过了两天，发现有些页面的部分区域的点击事件无法响应，百思不得其解，最后想到可能是设置的contentInset对其有了影响，事实上正是如此。查来查去，最后找到了一个解决办法是，就是当页面加载完成时，在网页下面拼一个空白的div，高度就是你添加的View的高度，让网页多出一个空白区域，自定义的View就添加在这个空白的区域上面。这样就完美解决了此问题。具体可参考Demo所写，核心代码如下:

 

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

self.addView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, ScreenWidth, addViewHeight)]; self.addView.backgroundColor = [UIColor redColor]; [self.webView.scrollView addSubview:self.addView];   NSString *js = [NSString stringWithFormat:@"\                         var appendDiv = document.getElementById(\"AppAppendDIV\");\                         if (appendDiv) {\                         appendDiv.style.height = %@+\"px\";\                         } else {\                         var appendDiv = document.createElement(\"div\");\                         appendDiv.setAttribute(\"id\",\"AppAppendDIV\");\                         appendDiv.style.width=%@+\"px\";\                         appendDiv.style.height=%@+\"px\";\                         document.body.appendChild(appendDiv);\                         }\                         ", @(addViewHeight), @(self.webView.scrollView.contentSize.width), @(addViewHeight)];   [self.webView evaluateJavaScript:js completionHandler:nil];

 

WKWebView加载HTTPS的链接

HTTPS已经越来越被重视，前面我也写过一系列的HTTPS的相关文章当加载一些HTTPS的页面的时候，如果此网站使用的根证书已经内置到了手机中这些HTTPS的链接可以正常的通过验证并正常加载。但是如果使用的证书(一般为自建证书)的根证书并没有内置到手机中，这时是链接是无法正常加载的，必须要做一个权限认证。开始在UIWebView的时候，是把请求存储下来然后使用NSURLConnection去重新发起请求，然后走NSURLConnection的权限认证通道，认证通过后，在使用UIWebView去加载这个请求。

在WKWebView中，WKNavigationDelegate中提供了一个权限认证的代理方法，这是权限认证更为便捷。代理方法如下:

 

 

1 2 3 4 5 6 7 8 9 10 11 12

- (void)webView:(WKWebView *)webView didReceiveAuthenticationChallenge:(NSURLAuthenticationChallenge *)challenge completionHandler:(void (^)(NSURLSessionAuthChallengeDisposition disposition, NSURLCredential *credential))completionHandler {     if ([challenge.protectionSpace.authenticationMethod isEqualToString:NSURLAuthenticationMethodServerTrust]) {         if ([challenge previousFailureCount] == 0) {             NSURLCredential *credential = [NSURLCredential credentialForTrust:challenge.protectionSpace.serverTrust];             completionHandler(NSURLSessionAuthChallengeUseCredential, credential);         } else {             completionHandler(NSURLSessionAuthChallengeCancelAuthenticationChallenge, nil);         }     } else {         completionHandler(NSURLSessionAuthChallengeCancelAuthenticationChallenge, nil);     } }

这个方法比原来UIWebView的认证简单的多。但是使用中却发现了一个很蛋疼的问题，iOS8系统下，自建证书的HTTPS链接，不调用此代理方法。查来查去，原来是一个bug，在iOS9中已经修复，这明显就是不管iOS8的情况了，而且此方法也没有标记在iOS9中使用，这点让我感到有点失望。这样我就又想到了换回原来UIWebView的权限认证方式，但是试来试去，发现也不能使用了。所以关于自建证书的HTTPS链接在iOS8下面使用WKWebView加载，我没有找到很好的办法去解决此问题。这样我不得已有些链接换回了HTTP，或者在iOS8下面在换回UIWebView。如果你有解决办法，也欢迎私信我，感激不尽。

WKWebView和JavaScript交互

WKWebView和JavaScript交互，在WKUserContentController.h这个头文件中- (void)addScriptMessageHandler:(id )scriptMessageHandler name:(NSString *)name;这个方法的注释中已经明确给出了交互办法。使用起来倒是非常的简单。创建WKWebView的时候添加交互对象，并让交互对象实现WKScriptMessageHandler中的唯一的一个代理方法。具体的方式参考Demo中的使用。

 

 

1 2 3 4 5

// 添加交互对象 [config.userContentController addScriptMessageHandler:(id)self.ocjsHelper name:@"timefor"];   // 代理方法 - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message;

JavaScript调用Objective-C的时候，使用window.webkit.messageHandlers.timefor.postMessage({code: '0001', functionName: 'getdevideId'}); Objective-C自动对交互参数包装成了WKScriptMessage对象，其属性body则为传送过来的参数，name为添加交互对象的时候设置的名字，以此名字可以过滤掉不属于自己的交互方法。其中body可以为NSNumber, NSString, NSDate, NSArray, NSDictionary, and NSNull。

而Objective-C在回调JavaScript的时候，不能像我原来在 这篇文章中写的那样，JavaScript传过来一个匿名函数，Objective-C这边直接调用一下就完事。WKWebView没有办法传过来一个匿名函数，所以回调方式，要么执行一段JavaScript代码，或者就是调用JavaScript那边的一个全局函数。一般是采用后者，至于Web端虽说暴露了一个全局函数，同样可以把这一点代码处理的很优雅。Objective-C传给JavaScript的参数，可以为Number, String, and Object。参考如下：

 

 

1 2 3 4 5 6 7 8 9 10 11 12 13

// 数字 NSString *js = [NSString stringWithFormat:@"globalCallback(%@)", number]; [self.webView evaluateJavaScript:js completionHandler:nil]; // 字符串 NSString *js = [NSString stringWithFormat:@"globalCallback(\'%@\')", string]; [self.webView evaluateJavaScript:js completionHandler:nil]; // 对象 NSString *js = [NSString stringWithFormat:@"globalCallback(%@)", @{ @"name" : @"timefor"}]; [self.webView evaluateJavaScript:js completionHandler:nil]; // 带返回值的JS函数 [self.webView evaluateJavaScript:@"globalCallback()" completionHandler:^(id result, NSError * _Nullable error) {     // 接受返回的参数，result中 }];

 

总结

此文主要介绍了WKWebView使用中的注意点，一般也都是常用的，还有缓存等一些不是太常用的就没有具体介绍。如果在其他方面遇到问题，也欢迎你私信我共同探讨进步。

此文的Demo地址： 如果此文对你有所帮助，请给个star吧。

参考