［iOS開發］WKWebView載入JS

標籤：

　　最近項目要用webView載入js檔案，挺同事說WKWebView比UIWebView更加好用，於是我今天就試試，百度一發，自己寫了個demo。

　　先看我寫的代碼，然後再來看WKWebView跟UIWebView的區別：

　　首先，遵循這兩個協議WKNavigationDelegate,WKScriptMessageHandler。

　　接著，擷取JS文本。

JS互動

- (void)getJS {

    NSString * js = @"window.webkit.messageHandlers.observe.postMessage(document.body.innerText);" ;// 注意這裡的observe欄位是自己寫的，不是固定的寫法，參考第6行

    WKUserScript *wkUserScript = [[WKUserScript alloc]initWithSource:js injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];// 這裡的 AtDocumentEnd 欄位是指網頁中的內容載入完畢後再插入 JS 指令碼，你也可以選擇 AtDocumentStart，在 document element 剛剛建立時就插入指令碼，看具體需求

    WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc]init];

    [config.userContentController addUserScript:wkUserScript];

    [config.userContentController addScriptMessageHandler:self name:@"observe"];

   // config.userContentController.addScriptMessageHandler(self, name: "observe") // 對應第一行 JS 指令碼中的observe欄位

    //初始化WKWebView

    self.webView = [[WKWebView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) configuration:config];

    [self.view addSubview:_webView];

    self.webView.navigationDelegate = self;

    //載入網頁

    [self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.jianshu.com"]]];

    //_webView.loadRequest(NSURLRequest(URL: NSURL(string: "http://www.jianshu.com")!))

}

　　然後，實現這兩個協議的方法。

常用代理方法

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{

    NSString *str = message.body ;// 因為我們抓取到的是文本，這裡把 message.body 強制轉換為 NSString，如果你通過 JS 拿到的是其他資訊，按需轉換

    NSLog(@"%@",str);

}

#pragma mark - 準備載入頁面

- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation {

}

#pragma mark - 已開始載入頁面，可以在這一步向view中添加一個過渡動畫

- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation {   

}

#pragma mark - //載入頁面失敗

- (void)webView:(WKWebView *)webView didFailNavigation:(WKNavigation *)navigation withError:(NSError *)error {   

}

- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation withError:(NSError *)error {   

}

　　最後，運行即可。

　　現在我們可以談談這兩個控制項的區別。

　　WKWebView 更快（佔用記憶體可能只有 UIWebView 的1/3~1/4），沒有緩衝，更為細緻地拆分了 UIWebViewDelegate 中的方法。
想要瞭解更多關於 WKWebView 的特性的，可以自行 Google，這裡你可以簡單地把它當做是輕量級的 UIWebView。

　　從現在開始，再開發 App 只相容 iOS 8 和 iOS 9 兩個版本就可以了（如果你的產品對覆蓋率要求不是很苛刻的話）。WKWebView 是 iOS 8 之後才有的 WebKit 中的內容，所以之前我們要同時相容 iOS 7 和 iOS 8 的時候，可以推辭說 UIWebView 和 WKWebView 一起做太麻煩了，現在可沒有理由拒絕新東西了。
　　

　　在 WKWebView 中，UIWebViewDelegate 與 UIWebView 被重構成了14類與3個協議，下面給出一些在 UIWebView 中常用的方法的 WKWebView 版本。

//準備載入頁面
UIWebViewDelegate - webView:shouldStartLoadWithRequest:navigationType
WKNavigationDelegate - webView:didStartProvisionalNavigation:

//已開始載入頁面，可以在這一步向view中添加一個過渡動畫

UIWebViewDelegate - webViewDidStartLoad:

WKNavigationDelegate - webView:didCommitNavigation:

//頁面已全部載入，可以在這一步把過渡動畫去掉
UIWebViewDelegate - webViewDidFinishLoad:
WKNavigationDelegate - webView:didFinishNavigation:

//載入頁面失敗
UIWebViewDelegate - webView:didFailLoadWithError:
WKNavigationDelegate - webView:didFailNavigation:withError:
WKNavigationDelegate - webView:didFailProvisionalNavigation:withError:

以上方法分別存在於 UIWebViewDelegate 和 WKNavigationDelegate 中。
如果你之前只是用到了以上列出的 UIWebViewDelegate 中的幾個方法，那麼只是簡單地換一個方法名，讓你的 ViewController 繼承 WKNavigationDelegate ，繼續用就可以了。想要更多內容可以自己用 cmd鍵+滑鼠左擊『WKNavigationDelegate』通過 Xcode 查看。
要注意的是 webview.delegate = self 需要改寫為 webview.navigationDelegate = self。

 

［iOS開發］WKWebView載入JS