WKWebView

2019-11-09 15:07:45

字體：大中小

來源：轉載

供稿：網友

iOS8之后，蘋果推出了WebKit這個框架，用來替換原有的UIWebView，新的控件優點多多，不一一敘述。由于一直在適配iOS7，就沒有去替換，現在仍掉了iOS7，以為很簡單的就替換過來了，然而在替換的過程中，卻遇到了很多坑。

WKWebView使用

WKWebView使用及注意點

WKWebView只能用代碼創建，而且自身就支持了右滑返回手勢allowsBackForwardNavigationGestures和加載進度estimatedPRogress等一些UIWebView不具備卻非常好用的屬性。在創建的時候，指定初始化方法中要求傳入一個WKWebViewConfiguration對象，一般我們使用默認配置就好，但是有些地方是要根據自己的情況去做更改。比如，配置中的allowsInlineMediaPlayback這個屬性，默認為NO，如果不做更改，網頁中的視頻將彈出一個全屏的控制器來播放，設置為YES，將內嵌在網頁中播放。

更改User-Agent

有時我們需要在User-Agent添加一些額外的信息，這時就要更改默認的User-Agent.self.wkWebView = [[WKWebView alloc] initWithFrame:CGRectZero];//獲取默認User-Agent[self.wkWebView evaluatejavaScr

需要注意的是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交互相關，具體介紹參考下面的專門講解。

一、加載網頁

加載網頁或HTML代碼的方式與UIWebView相同，代碼示例如下：WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.bounds];[webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]]];[self.view addSubview:webView];

二、加載的狀態回調（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; // 在發送請求之前，決定是否跳轉 -(void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler;

三、新的WKUIDelegate協議

這個協議主要用于WKWebView處理web界面的三種提示框(警告框、確認框、輸入框)，下面是警告框的例子:/** * web界面中有彈出警告框時調用 * * @param webView 實現該代理的webview * @param message 警告框中的內容 * @param frame 主窗口 * @param completionHandler 警告框消失調用 */- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(void (^)())completionHandler;

四、動態加載并運行JS代碼

用于在客戶端內部加入JS代碼，并執行，示例如下：// 圖片縮放的js代碼NSString *js = @"var count = document.images.length;for (var i = 0; i < count; i++) {var image = document.images[i];image.style.width=320;};window.alert('找到' + count + '張圖');";// 根據JS字符串初始化WKUserScript對象WKUserScript *script = [[WKUserScript alloc] initWithSource:js injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];// 根據生成的WKUserScript對象，初始化WKWebViewConfigurationWKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];[config.userContentController addUserScript:script];_webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];[_webView loaDHTMLString:@"<head></head><imgea src='http://www.nsu.edu.cn/v/2014v3/img/background/3.jpg' />"baseURL:nil];[self.view addSubview:_webView];

五、webView 執行JS代碼

用戶調用用JS寫過的代碼，一般指服務端開發的：//javaScriptString是JS方法名，completionHandler是異步回調block[self.webView evaluateJavaScript:javaScriptString completionHandler:completionHandler];

六、JS調用App注冊過的方法

再WKWebView里面注冊供JS調用的方法，是通過WKUserContentController類下面的方法：- (void)addScriptMessageHandler:(id <WKScriptMessageHandler>)scriptMessageHandler name:(NSString *)name;scriptMessageHandler是代理回調，JS調用name方法后，OC會調用scriptMessageHandler指定的對象。

JS在調用OC注冊方法的時候要用下面的方式：

window.webkit.messageHandlers.<name>.postMessage(<messageBody>)

注意：name(方法名)是放在中間的，messageBody只能是一個對象，如果要傳多個值，需要封裝成數組，或者字典。整個示例如下：

//OC注冊供JS調用的方法[[_webView configuration].userContentController addScriptMessageHandler:self name:@"closeMe"];//OC在JS調用方法做的處理- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{ NSLog(@"JS 調用了 %@ 方法，傳回參數 %@",message.name,message.body);}

//JS調用 window.webkit.messageHandlers.closeMe.postMessage(null); 如果你在self的dealloc打個斷點，會發現self沒有釋放！這顯然是不行的！谷歌后看到一種解決方法，如下：

@interface WeakScriptMessageDelegate : NSObject<WKScriptMessageHandler>@property (nonatomic, weak) id<WKScriptMessageHandler> scriptDelegate;- (instancetype)initWithDelegate:(id<WKScriptMessageHandler>)scriptDelegate;@end@implementation WeakScriptMessageDelegate- (instancetype)initWithDelegate:(id<WKScriptMessageHandler>)scriptDelegate{ self = [super init]; if (self) { _scriptDelegate = scriptDelegate; } return self;}- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{ [self.scriptDelegate userContentController:userContentController didReceiveScriptMessage:message];}@end

思路是另外創建一個代理對象，然后通過代理對象回調指定的self，

WKUserContentController *userContentController = [[WKUserContentController alloc] init]; [userContentController addScriptMessageHandler:[[WeakScriptMessageDelegate alloc] initWithDelegate:self] name:@"closeMe"];

運行代碼，self釋放了，WeakScriptMessageDelegate卻沒有釋放啊啊啊！還需在self的dealloc里面添加這樣一句代碼：

[[_webView configuration].userContentController removeScriptMessageHandlerForName:@"closeMe"];

上一篇：Bootloader學習一

下一篇：GitHub Pages 綁定域名