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 方法來進行展示。

  1. 通過 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];
}
  1. 加載本地 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 文件
  1. 通過 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
  1. 通過 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;
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容