iOS WKWebView詳解,ioswkwebview詳解

來源:互聯網
上載者:User

iOS WKWebView詳解,ioswkwebview詳解

UIWebView就不用說了,這個過時了,現在iOS8以後建議都使用WKWebView。

WKWebView 是現代 WebKit API 在 iOS 8 和 OS X Yosemite 應用中的核心部分。它代替了 UIKit 中的UIWebView 和 AppKit 中的 WebView,提供了統一的跨雙平台 API。

自詡擁有 60fps 滾動重新整理率、內建手勢、高效的 app 和 web 資訊交換通道、和 Safari 相同的 JavaScript 引擎,WKWebView 毫無疑問地成為了 WWDC 2014 上的最亮點。

【UIWebView 和 WKWebView 的區別】
WKWebView 更快(佔用記憶體可能只有 UIWebView 的1/3~1/4),沒有緩衝,更為細緻地拆分了 UIWebViewDelegate 中的方法。

【為什麼現在是時候從 UIWebView 遷移到 WKWebView 了】
截止到我寫這篇文章的時候,據 mixpanel 的資料,iOS 9 佔有率已達 58.55%,iOS 8 佔有率達到了 34.78%,iOS 7 及更早版本是 6.66%,而那 6.66% 應該大部分都是對手機使用極度不頻繁的人。所以從現在開始,再開發 App 只相容 iOS 8 和 iOS 9 兩個版本就可以了(如果你的產品對覆蓋率要求不是很苛刻的話)。WKWebView 是 iOS 8 之後才有的 WebKit 中的內容,所以之前我們要同時相容 iOS 7 和 iOS 8 的時候,可以推辭說 UIWebView 和 WKWebView 一起做太麻煩了,現在可沒有理由拒絕新東西了。

目前iOS各個版本市場使用率參見:https://developer.apple.com/support/app-store/

[常用代理方法]

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

 

//準備載入頁面UIWebViewDelegate - webView:shouldStartLoadWithRequest:navigationTypeWKNavigationDelegate - 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

JS互動

在 UIWebView 中,一句簡單的webView.stringByEvaluatingJavaScriptFromString() 就可以用 JS 指令碼操縱 WebView,在 WKWebView 中,我們可能需要用到 WKScriptMessageHandler 這個協議中的 func userContentController(userContentController: WKUserContentController, didReceiveScriptMessage message: WKScriptMessage) 方法。

下面的範例程式碼用於從 WKWebView 中擷取網頁中的文本。

let js = "window.webkit.messageHandlers.observe.postMessage(document.body.innerText);" // 注意這裡的observe欄位是自己寫的,不是固定的寫法,參考第6行    let script = WKUserScript(source: js, injectionTime: WKUserScriptInjectionTime.AtDocumentEnd, forMainFrameOnly: true) // 這裡的 AtDocumentEnd 欄位是指網頁中的內容載入完畢後再插入 JS 指令碼,你也可以選擇 AtDocumentStart,在 document element 剛剛建立時就插入指令碼,看具體需求    let config = WKWebViewConfiguration()    config.userContentController.addUserScript(script)    config.userContentController.addScriptMessageHandler(self, name: "observe") // 對應第一行 JS 指令碼中的observe欄位    //初始化WKWebView    let webview = WKWebView(        frame: CGRectMake(0, 0, self.view.frame.width, self.view.frame.height),        configuration: config)    webview.navigationDelegate = self    self.view.addSubview(webview)    //載入網頁    webview.loadRequest(NSURLRequest(URL: NSURL(string: "http://www.jianshu.com")!))

  


可能你也注意到了,把 JS 指令碼注入到 WebView 的途徑是初始化一個 WebView,所以你需要在 WebView 初始化之前寫好自己的指令碼。當然如果你不需要 JS 互動,直接用一個 frame 來初始化 WebView,去掉 configuration 參數就好了。

然而,我們如何拿到從 WKWebView 中抓取到的文本呢(通過 document.body.innerText 這一句)?
如上面所說,讓你的 ViewController 在繼承了 WKNavigationDelegate 之後再繼承一下 WKScriptMessageHandler 。然後實現 WKScriptMessageHandler 中唯一的一個方法:

func userContentController(userContentController: WKUserContentController, didReceiveScriptMessage message: WKScriptMessage){    let str:NSString = message.body as! NSString // 因為我們抓取到的是文本,這裡把 message.body 強制轉換為 NSString,如果你通過 JS 拿到的是其他資訊,按需轉換    print(str)}

  

乍一看這裡可能會有疑惑:我們給 WKWebView 綁定了 WKNavigationDelegate,但是 WKScriptMessageHandler 並沒有提供代理方法啊。其實與此相對應的過程出現在上一段代碼中的第5行:config.userContentController.addScriptMessageHandler 這一句。

 
參考文獻:http://nshipster.cn/wkwebkit/http://www.jianshu.com/p/f94cad074196

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.