WKWebView学习笔记（一）

苹果在 iOS 8.0的时候用 WKWebView 替换了笨重的 UIWebView 。

WKWebView 的优点：

1. 对 HTML5 更好的支持
2. 速度更快
3. 内存占用更低
4. 更多的属性和更多的加载过程回调

在使用 WKWebView 的时候需要注意，Xcode 7 对 HTTP 请求做了限制，需要在 info.plist 中添加 App Transport Security Settings 字段允许 HTTP 请求。

42B54F0C-3466-42E2-923A-E2ED43683CA9.png

WKWebView 的简单使用

#import "HPWKWebViewController.h"
#import <WebKit/WebKit.h>

@interface HPWKWebViewController ()
@property (weak, nonatomic) IBOutlet UIView *webViewBox;

@property (weak, nonatomic) IBOutlet UIView *controlView;
@end

@implementation HPWKWebViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    WKWebView *webView = [[WKWebView alloc] init];
    webView.frame = self.webViewBox.bounds;
    [self.webViewBox addSubview:webView];
    NSURL *url = [NSURL URLWithString:@"http://www.256day.com"];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [webView loadRequest:request];

}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

要使用 WKWebView 需要导入 WebKit 框架：

#import <WebKit/WebKit.h>

效果如下：

加载一个网页

WKWebView 的初始化方法

WKWebView 的父类是 UIView ，父类有的初始化方法，如：

- (instancetype)init

- (instancetype)initWithFrame:(CGRect)frame NS_DESIGNATED_INITIALIZER;

WKWebView 也可以使用，来看一下 WKWebView 特有的初始化方法

/*
该方法是通过一个指定的 frame 和 configuration 来初始化 WKWebView
 */
- (instancetype)initWithFrame:(CGRect)frame configuration:(WKWebViewConfiguration *)configuration NS_DESIGNATED_INITIALIZER;

- (nullable instancetype)initWithCoder:(NSCoder *)coder NS_DESIGNATED_INITIALIZER;

WKWebViewConfiguration

/*
web 内容加载池
当一个 webview 被初始化的时候，会有一个新的内容加载池从制定的加载池被创建，或者使用一个已经存在的内容加载池
*/
@property (nonatomic, strong) WKProcessPool *processPool;

/*! @abstract webview 的偏好设置.
*/
@property (nonatomic, strong) WKPreferences *preferences;

/*! @abstract 可以在加载web内容的时候添加用户指定的 js 脚本.
*/
@property (nonatomic, strong) WKUserContentController *userContentController;

/*
存储的 web 内容 cookies等   iOS 9.0 才能使用
 */
@property (nonatomic, strong) WKWebsiteDataStore *websiteDataStore API_AVAILABLE(macosx(10.11), ios(9.0));

/*
是否在所有的数据加载到内存中才开始渲染，默认为 NO
 */
@property (nonatomic) BOOL suppressesIncrementalRendering;

/*
设置应用的代理名称
*/
@property (nullable, nonatomic, copy) NSString *applicationNameForUserAgent API_AVAILABLE(macosx(10.11), ios(9.0));

WKPreferences

这个类是 webview 的偏好设置，渲染如字体最小值，是否支持 js 脚本，能否通过 js 自动打开新的窗口等等。

/*
字体最小值，如果字体小于这个值，则使用这个值，感谢 @JoySeeDog
 */
@property (nonatomic) CGFloat minimumFontSize;

/*
设置 js 脚本是否可用，默认为可用
 */
@property (nonatomic) BOOL javaScriptEnabled;

/*
脚本是否能够自动打开新的窗口，在 iOS 下面默认值为NO，即不能自动打开窗口，在 OS X 下默认值为 YES ,能自动打开窗口。
 */
@property (nonatomic) BOOL javaScriptCanOpenWindowsAutomatically;

WKUserContentController

在 web 内容记载时注入的 js 脚本。

/*
添加的 js 脚本
*/
@property (nonatomic, readonly, copy) NSArray<WKUserScript *> *userScripts;

/*
添加 js 脚本
*/
- (void)addUserScript:(WKUserScript *)userScript;

/*
移除所有的 js 脚本
*/
- (void)removeAllUserScripts;

WKWebsiteDataStore

存储的 web 内容，类型有：

WKWebsiteDataTypeCookies
WKWebsiteDataTypeDiskCache
WKWebsiteDataTypeMemoryCache
WKWebsiteDataTypeOfflineWebApplicationCache
WKWebsiteDataTypeSessionStorage
WKWebsiteDataTypeLocalStorage
WKWebsiteDataTypeWebSQLDatabases
WKWebsiteDataTypeIndexedDBDatabases

可以使用一下代码输出存储的类型和内容

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
    configuration.preferences.minimumFontSize = 100.0f;
    configuration.preferences.javaScriptEnabled = NO;
    NSSet<NSString *> *set = WKWebsiteDataStore.allWebsiteDataTypes;
    [configuration.websiteDataStore fetchDataRecordsOfTypes:set completionHandler:^(NSArray<WKWebsiteDataRecord *> * array) {
        for (WKWebsiteDataRecord *record in array) {
            NSSet<NSString *> *types = record.dataTypes;
            NSEnumerator *enumerator = types.objectEnumerator;
            NSString *type ;
            while (type = [enumerator nextObject]) {
                NSLog(@"type:%@", type);
            }
            NSLog(@"%@", record.displayName);
        }
    }];
    WKWebView *webView = [[WKWebView alloc] initWithFrame:self.webViewBox.bounds configuration:configuration];
    webView.frame = self.webViewBox.bounds;
    [self.webViewBox addSubview:webView];    
    NSURL *webURL = [NSURL URLWithString:@"http://www.256day.com"];
    NSURLRequest *request = [NSURLRequest requestWithURL:webURL];
    [webView loadRequest:request];    
}

运行之后可以看到输出：

2017-03-26 21:18:55.496 WebViewDemo[19356:11442303] type:WKWebsiteDataTypeDiskCache
2017-03-26 21:18:55.496 WebViewDemo[19356:11442303] jianshu.io
2017-03-26 21:18:55.497 WebViewDemo[19356:11442303] type:WKWebsiteDataTypeDiskCache
2017-03-26 21:18:55.497 WebViewDemo[19356:11442303] fonts.googleapis.com
2017-03-26 21:18:55.497 WebViewDemo[19356:11442303] type:WKWebsiteDataTypeDiskCache
2017-03-26 21:18:55.497 WebViewDemo[19356:11442303] gstatic.com
2017-03-26 21:18:55.498 WebViewDemo[19356:11442303] type:WKWebsiteDataTypeDiskCache
2017-03-26 21:18:55.498 WebViewDemo[19356:11442303] 256day.com

applicationNameForUserAgent
使用 Charles 抓一下包，看看在没有设置这个属性的时候的 User-Agent:

未设置 User-Agent

设置后的 User-Agent:

Paste_Image.png

源码如下：

WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
    configuration.preferences.minimumFontSize = 100.0f;
    //configuration.preferences.javaScriptEnabled = NO;
    configuration.suppressesIncrementalRendering = YES;
    configuration.applicationNameForUserAgent = @"UserAgent-Name";

有人可能会疑惑在没有设置 User-Agent 的时候会有个奇怪的值：

14C89

这个其实是在这的：

Paste_Image.png

WKWebViewConfiguration 就先介绍到这，下面看一下 WKWebView 的方法和属性。

WKWebView 加载数据

先看 WKWebView 的四种加载网页数据的方法。

/*
通过 NSURLRequest 加载网页
 */
- (nullable WKNavigation *)loadRequest:(NSURLRequest *)request;

/*
加载本地网页文件
 */
- (nullable WKNavigation *)loadFileURL:(NSURL *)URL allowingReadAccessToURL:(NSURL *)readAccessURL API_AVAILABLE(macosx(10.11), ios(9.0));

/*
加载 html 数据
 */
- (nullable WKNavigation *)loadHTMLString:(NSString *)string baseURL:(nullable NSURL *)baseURL;

/*
加载 NSData 类型的数据
 */
- (nullable WKNavigation *)loadData:(NSData *)data MIMEType:(NSString *)MIMEType characterEncodingName:(NSString *)characterEncodingName baseURL:(NSURL *)baseURL API_AVAILABLE(macosx(10.11), ios(9.0));

这四种方法分别用在不同的场景下面。
如果需要加载一个 URL 网页，如：http://www.256day.com ，需要通过 loadRequest 方法来进行加载。
如果加载一个本地的 HTML 文件，可通过 loadFileURL ，也可以将这个本地文件内容读取之后再通过 loadHTMLString 或者 loadData 方法来进行展示。

通过 URL 加载网页：

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    WKWebView *webView = [[WKWebView alloc] initWithFrame:self.webViewBox.bounds];
    webView.frame = self.webViewBox.bounds;
    [self.webViewBox addSubview:webView];

    NSURL *webURL = [NSURL URLWithString:@"http://www.256day.com"];
    NSURLRequest *request = [NSURLRequest requestWithURL:webURL];
    [webView loadRequest:request];
}

加载本地 HTML 文件

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    WKWebView *webView = [[WKWebView alloc] initWithFrame:self.webViewBox.bounds];
    webView.frame = self.webViewBox.bounds;
    [self.webViewBox addSubview:webView];
    NSString *path = [[NSBundle mainBundle] pathForResource:@"MyPage" ofType:@"html"];
    NSURL *url = [NSURL fileURLWithPath:path];
    [webView loadFileURL:url allowingReadAccessToURL:url];
}

效果图：

加载本地 HTML 文件

通过 NSString 数据展示网页

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    WKWebView *webView = [[WKWebView alloc] initWithFrame:self.webViewBox.bounds];
    webView.frame = self.webViewBox.bounds;
    [self.webViewBox addSubview:webView];
    NSString *htmlString = @"<h1>HTML string</h1>";
    [webView loadHTMLString:htmlString baseURL:nil];
}

效果图：

Paste_Image.png

通过 NSData 数据展示网页

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    WKWebView *webView = [[WKWebView alloc] initWithFrame:self.webViewBox.bounds];
    webView.frame = self.webViewBox.bounds;
    [self.webViewBox addSubview:webView];
    NSString *filePath = [[NSBundle mainBundle] pathForResource:@"MyPage" ofType:@"html"];
    NSData *htmlData = [NSData dataWithContentsOfFile:filePath];
    NSURL *baseURL = [NSURL fileURLWithPath:filePath isDirectory:NO];
    [webView loadData:htmlData MIMEType:@"text/html" characterEncodingName:@"UTF-8" baseURL:baseURL.URLByDeletingLastPathComponent];
}

效果图：

Paste_Image.png

MIMEType

MIME (Multipurpose Internet Mail Extensions) 是描述消息内容类型的因特网标准。
MIME 消息能包含文本、图像、音频、视频以及其他应用程序专用的数据。

想深入了解的同学可以参考这篇文章MIME Type 介绍。

baseURL

在 webview 加载的 data 或者 string 中有一些链接是图片或者 css 等外部文件，这些文件需要到一个目录上去查找，baseURL 就是这个目录。

WKWebView 代理

/*! @abstract webview 的导航代理
@property (nullable, nonatomic, weak) id <WKNavigationDelegate> navigationDelegate;

/*! @abstract webview 的视图代理
@property (nullable, nonatomic, weak) id <WKUIDelegate> UIDelegate;

WKNavigationDelegate

/*
决定是否允许跳转，主要用于对于跨域的安全检查限制
 */
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler;

/*
决定是否接受响应
 */
- (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler;

/*
当 main frame 的导航开始请求时，会调用此方法。
 */
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(null_unspecified WKNavigation *)navigation;

/*
当 main frame 接收到重定向时，会调用此方法。
 */
- (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;

/*
用于授权验证
 */
- (void)webView:(WKWebView *)webView didReceiveAuthenticationChallenge:(NSURLAuthenticationChallenge *)challenge completionHandler:(void (^)(NSURLSessionAuthChallengeDisposition disposition, NSURLCredential * _Nullable credential))completionHandler;

/*数据处理完成时，调用此方法。
 */
- (void)webViewWebContentProcessDidTerminate:(WKWebView *)webView API_AVAILABLE(macosx(10.11), ios(9.0));

WKUIDelegate

/* 创建一个新的 webview
 */
- (nullable WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures;

/*!  webview 关闭时，会调用此方法。
  */
- (void)webViewDidClose:(WKWebView *)webView API_AVAILABLE(macosx(10.11), ios(9.0));

/*! js 调用 alert 方法的时候会调用此方法。
 */
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler;

/*! js 调用 confirm 方法时会调用此方法。
 */
- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler;

/*! js 调用 prompt 方法时会调用此方法。
 */
- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * _Nullable result))completionHandler;

最后编辑于：2017.12.06 05:27:20

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 157,198评论 4赞 359
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 66,663评论 1赞 290
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 106,985评论 0赞 237
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 43,673评论 0赞 202
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 51,994评论 3赞 285
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,399评论 1赞 211
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,717评论 2赞 310
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,407评论 0赞 194
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,112评论 1赞 239
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,371评论 2赞 241
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 31,891评论 1赞 256
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,255评论 2赞 250
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 32,881评论 3赞 233
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,010评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,764评论 0赞 192
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,412评论 2赞 269
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,299评论 2赞 260

WKWebView学习笔记（一）

WKWebView 的简单使用

WKWebView 的初始化方法

WKWebView 加载数据

WKWebView 代理

推荐阅读更多精彩内容