Swift使用WKWebView在iOS應(yīng)用中調(diào)用Web的方法詳解
更新時(shí)間：2016年04月18日 15:15:08 作者：全能酸奶
這篇文章主要介紹了Swift使用WKWebView在iOS應(yīng)用中調(diào)用Web的方法詳解,使用WKWebView便等于使用和Safari中相同的JavaScript解釋器,用來替代過去的UIWebView,需要的朋友可以參考下
自從iOS8開始,Apple引入了WKWebView欲代替UIWebView。相比而言,WKWebView消耗內(nèi)從更少,功能也更加強(qiáng)大。讓我們來看看WKWebView怎么使用吧!
0.初始化
（1）首先需要引入WebKit庫
復(fù)制代碼 代碼如下:
#import <WebKit/WebKit.h>
（2）初始化方法分為以下兩種
復(fù)制代碼 代碼如下:
// 默認(rèn)初始化
- (instancetype)initWithFrame:(CGRect)frame;
// 根據(jù)對(duì)webview的相關(guān)配置，進(jìn)行初始化
- (instancetype)initWithFrame:(CGRect)frame configuration:(WKWebViewConfiguration *)configuration NS_DESIGNATED_INITIALIZER;
（3）加載網(wǎng)頁與HTML代碼的方式與UIWebView相同，代碼如下：
復(fù)制代碼 代碼如下:
WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.bounds];
[webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]]];
[self.view addSubview:webView];
1. WKWebView的代理方法
（1） WKNavigationDelegate
該代理提供的方法，可以用來追蹤加載過程（頁面開始加載、加載完成、加載失敗）、決定是否執(zhí)行跳轉(zhuǎn)。
復(fù)制代碼 代碼如下:
// 頁面開始加載時(shí)調(diào)用
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation;
// 當(dāng)內(nèi)容開始返回時(shí)調(diào)用
- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation;
// 頁面加載完成之后調(diào)用
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation;
// 頁面加載失敗時(shí)調(diào)用
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation;
頁面跳轉(zhuǎn)的代理方法有三種，分為（收到跳轉(zhuǎn)與決定是否跳轉(zhuǎn)兩種）
復(fù)制代碼 代碼如下:
// 接收到服務(wù)器跳轉(zhuǎn)請(qǐng)求之后調(diào)用
- (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(WKNavigation *)navigation;
// 在收到響應(yīng)后，決定是否跳轉(zhuǎn)
- (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler;
// 在發(fā)送請(qǐng)求之前，決定是否跳轉(zhuǎn)
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler;
（2）WKUIDelegate
復(fù)制代碼 代碼如下:
// 創(chuàng)建一個(gè)新的WebView
- (WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures;
剩下三個(gè)代理方法全都是與界面彈出提示框相關(guān)的，針對(duì)于web界面的三種提示框（警告框、確認(rèn)框、輸入框）分別對(duì)應(yīng)三種代理方法。下面只舉了警告框的例子。
復(fù)制代碼 代碼如下:
/**
* web界面中有彈出警告框時(shí)調(diào)用
*
* @param webView 實(shí)現(xiàn)該代理的webview
* @param message 警告框中的內(nèi)容
* @param frame 主窗口
* @param completionHandler 警告框消失調(diào)用
*/
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(void (^)())completionHandler;
（3）WKScriptMessageHandler
這個(gè)協(xié)議中包含一個(gè)必須實(shí)現(xiàn)的方法，這個(gè)方法是提高App與web端交互的關(guān)鍵，它可以直接將接收到的JS腳本轉(zhuǎn)為OC或Swift對(duì)象。（當(dāng)然，在UIWebView也可以通過“曲線救國”的方式與web進(jìn)行交互，著名的Cordova框架就是這種機(jī)制）
復(fù)制代碼 代碼如下:
// 從web界面中接收到一個(gè)腳本時(shí)調(diào)用
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message;
2.修改Info.plist
注意從iOS9開始,凡是涉及到網(wǎng)絡(luò)操作的,都要在Info.plist中加入:
3.加載網(wǎng)頁
先要在ViewController 導(dǎo)入WebKit:
復(fù)制代碼 代碼如下:
import WebKit
然后:
復(fù)制代碼 代碼如下:
var webview = WKWebView()
override func viewDidLoad() {
super.viewDidLoad()
//創(chuàng)建wkwebview
let webview = WKWebView(frame: CGRectMake(0, 0, self.view.frame.width, self.view.frame.height))
//創(chuàng)建網(wǎng)址
let url = NSURL(string: "http://www.jianshu.com/users/040395b7230c/latest_articles")
//創(chuàng)建請(qǐng)求
let request = NSURLRequest(URL: url!)
//加載請(qǐng)求
webview.loadRequest(request)
//添加wkwebview
self.view.addSubview(webview)
}
運(yùn)行效果如圖:
4.獲取網(wǎng)頁標(biāo)題
為了顯示標(biāo)題,首先給ViewController嵌入一個(gè)NavigationController。有了導(dǎo)航欄后,我們要調(diào)整一下webview的y軸位置,防止導(dǎo)航欄遮住網(wǎng)頁上面部分,在viewDidLoad()里寫上:
復(fù)制代碼 代碼如下:
//獲取導(dǎo)航欄高度
let navHeight = self.navigationController?.navigationBar.frame.height
//獲取狀態(tài)欄高度
let statusHeight = UIApplication.sharedApplication().statusBarFrame.height
webview = WKWebView(frame: CGRectMake(0, statusHeight+navHeight!,self.view.frame.width, self.view.frame.height))
其次,這里要用到WKNavigationDelegate，所以在viewDidLoad()里加上
復(fù)制代碼 代碼如下:
self.webview.navigationDelegate = self
注意網(wǎng)頁標(biāo)題要在網(wǎng)頁加載完成后才能獲取,否則為空,于是我們用到'處理網(wǎng)頁加載完成'這個(gè)方法:
復(fù)制代碼 代碼如下:
func webView(webView: WKWebView, didFinishNavigation navigation: WKNavigation!) {
self.navigationItem.title = self.webview.title
}
運(yùn)行效果如圖:
5.前進(jìn)和后退
首先我們要在navgationBar上添加前進(jìn)和后退按鈕:
復(fù)制代碼 代碼如下:
var btnBack = UIBarButtonItem()
var btnForward = UIBarButtonItem()
func setNavBar() {
btnBack = UIBarButtonItem(title: "后退", style: UIBarButtonItemStyle.Plain, target: self, action: "toBack")
btnForward = UIBarButtonItem(title: "前進(jìn)", style: UIBarButtonItemStyle.Plain, target: self, action: "toForward")
self.navigationItem.leftBarButtonItem = btnBack
self.navigationItem.rightBarButtonItem = btnForward
}
然后我們用到了goBack()和goForward()方法,在前進(jìn)或后退之前我們要判斷一下網(wǎng)頁是否能夠前進(jìn)或后退:
復(fù)制代碼 代碼如下:
func toBack() {
if self.webview.canGoBack {
self.webview.goBack()
}
}
func toForward() {
if self.webview.canGoForward {
self.webview.goForward()
}
}
最后在viewDidLoad()里加上調(diào)用setNavBar()方法:
復(fù)制代碼 代碼如下:
setNavBar()
運(yùn)行效果如圖:
6.修改網(wǎng)頁配置
現(xiàn)在,一個(gè)看似很簡(jiǎn)單的瀏覽器完成了,但如果我們把網(wǎng)址換成:
http://csol2.tiancity.com/homepage/article/Class_1166_Time_1.html
即在viewDidLoad()里修改:
復(fù)制代碼 代碼如下:
let url = NSURL(string: "http://csol2.tiancity.com/homepage/article/Class_1166_Time_1.html")
我們會(huì)發(fā)現(xiàn)網(wǎng)頁上列表里的文字,包括頂欄上的文字點(diǎn)擊了沒反應(yīng),問題出在哪里呢?這是因?yàn)橄到y(tǒng)阻止了不安全的連接。怎么解決呢？我們就要用到WKUIDelegate中的createWebViewWithConfiguration()這個(gè)方法讓其允許導(dǎo)航,首先我們要設(shè)置自身代理,在viewDidLoad()里加上:
復(fù)制代碼 代碼如下:
self.webview.UIDelegate = self
其次:
復(fù)制代碼 代碼如下:
func webView(webView: WKWebView, createWebViewWithConfiguration configuration: WKWebViewConfiguration, forNavigationAction navigationAction: WKNavigationAction, windowFeatures: WKWindowFeatures) -> WKWebView? {
//如果目標(biāo)主視圖不為空,則允許導(dǎo)航
if !(navigationAction.targetFrame?.mainFrame != nil) {
self.webview.loadRequest(navigationAction.request)
}
return nil
}
運(yùn)行一下,發(fā)現(xiàn)點(diǎn)擊跳轉(zhuǎn)了!
7.處理js的提示框
現(xiàn)在把網(wǎng)址修改為
http://evt.tiancity.com/csol2/1565/home/index.php
即在viewDidLoad()里修改:
復(fù)制代碼 代碼如下:
let url = NSURL(string: "http://evt.tiancity.com/csol2/1565/home/index.php")
往下拉,點(diǎn)擊'立即領(lǐng)取',本應(yīng)該出現(xiàn)提示框,卻發(fā)現(xiàn)什么也沒發(fā)生。為此,我們要處理一下js的提示框事件。還記得一開始提到的那個(gè)方法吧,如下:
復(fù)制代碼 代碼如下:
func webView(webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: () -> Void) {
let alert = UIAlertController(title: nil, message: message, preferredStyle: .Alert)
alert.addAction(UIAlertAction(title: "Ok", style: .Default, handler: { (_) -> Void in
completionHandler()
}))
self.presentViewController(alert, animated: true, completion: nil)
}
這里要?jiǎng)?chuàng)建一個(gè)警告框來顯示,現(xiàn)在再運(yùn)行一下看看?!
8.添加進(jìn)度條
我們知道UIWebView是無法獲取網(wǎng)頁加載的進(jìn)度的,于是也就無法創(chuàng)建進(jìn)度條了,當(dāng)然我們可以以某種算法模擬網(wǎng)頁加載,自己設(shè)置進(jìn)度條的值。而WKWebView卻提供了獲取網(wǎng)頁加載進(jìn)度的方法,支持KVO,也就是estimatedProgress。另外還有l(wèi)oading是否正在加載和title頁面標(biāo)題。
我們得創(chuàng)建一個(gè)進(jìn)度條:
復(fù)制代碼 代碼如下:
var progBar = UIProgressView()
//以下代碼添加到viewDidLoad()
progBar = UIProgressView(frame: CGRectMake(0, 0, self.view.frame.width, 30))
progBar.progress = 0.0
progBar.tintColor = UIColor.redColor()
self.webview.addSubview(progBar)
然后給網(wǎng)頁添加監(jiān)聽進(jìn)度,同樣在viewDidLoad()里:
復(fù)制代碼 代碼如下:
self.webview.addObserver(self, forKeyPath: "estimatedProgress", options: NSKeyValueObservingOptions.New, context: nil)
再處理KVO:
復(fù)制代碼 代碼如下:
override func observeValueForKeyPath(keyPath: String?, ofObject object: AnyObject?, change: [String : AnyObject]?, context: UnsafeMutablePointer<Void>) {
if keyPath == "estimatedProgress" {
self.progBar.alpha = 1.0
progBar.setProgress(Float(webview.estimatedProgress), animated: true)
//進(jìn)度條的值最大為1.0
if(self.webview.estimatedProgress >= 1.0) {
UIView.animateWithDuration(0.3, delay: 0.1, options: UIViewAnimationOptions.CurveEaseInOut, animations: { () -> Void in
self.progBar.alpha = 0.0
}, completion: { (finished:Bool) -> Void in
self.progBar.progress = 0
})
}
}
}
這里設(shè)置進(jìn)度條的值很重要,因?yàn)槲覀儼l(fā)現(xiàn),其實(shí)進(jìn)度條的值總比網(wǎng)頁加載的實(shí)際值慢一些,兩者并不同步。如果你不添加動(dòng)畫使進(jìn)度條加載完成后消失,你會(huì)發(fā)現(xiàn)進(jìn)度條還沒到最右邊中途就不見了。所以我們要用個(gè)動(dòng)畫來實(shí)現(xiàn)。此外,如果把self.progBar.progress = 0這句語句,即清零的功能放到別的方法中去,比如說放到開始導(dǎo)航的時(shí)候來清零,你會(huì)發(fā)現(xiàn)進(jìn)度條的動(dòng)畫有問題,會(huì)來回轉(zhuǎn)?？傊?怎么處理進(jìn)度條的動(dòng)畫很講究,我試了好多次發(fā)現(xiàn)這個(gè)方法相對(duì)來說穩(wěn)定一些。所以我建議大家可以換個(gè)進(jìn)度條的樣式,即不依賴于值的顯示,如可以轉(zhuǎn)圈圈等等。現(xiàn)在有好多第三方庫可以使用,大家可以上cocoapods去查找。
還有一點(diǎn)別忘了,對(duì)于KVO模式，有add一定要remove,否則會(huì)崩潰。我們可以在視圖消失的時(shí)候添加remove:
復(fù)制代碼 代碼如下:
override func viewWillDisappear(animated: Bool) {
webview.removeObserver(self, forKeyPath: "estimatedProgress")
}
大家可以換些網(wǎng)址試試!
9.最終效果圖
10.總結(jié)
WKWebView的簡(jiǎn)單使用就介紹到這里了!大家有興趣可以為其添加更多功能!如果喜歡本文的話別忘了點(diǎn)擊喜歡哦!
后記
既然說WKWebView相比UIWebView消耗的內(nèi)存更少,那么我們就來實(shí)際對(duì)比一下，我們讓它們加載同一個(gè)網(wǎng)站，結(jié)果如圖
(左為UIWebView,右為WKWebView):
相關(guān)文章
Swift 函數(shù)用來完成特定任務(wù)的獨(dú)立的代碼塊。這篇文章主要介紹了swift變量和函數(shù)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08
詳解Swift語言的while循環(huán)結(jié)構(gòu)
這篇文章主要介紹了Swift語言的while循環(huán)結(jié)構(gòu),包括do...while循環(huán)的用法,需要的朋友可以參考下2015-11-11
Swift 3.1聊天界面鍵盤效果的實(shí)現(xiàn)詳解
這篇文章主要給大家介紹了Swift 3.1聊天界面鍵盤效果實(shí)現(xiàn)的相關(guān)資料，文中介紹的非常詳細(xì)，相信對(duì)大家的學(xué)習(xí)或者工作具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。2017-04-04
這篇文章主要為大家詳細(xì)介紹了Swift自定義UITableViewCell背景色，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要介紹了C語言編程中volatile修飾符的作用,文章深入到內(nèi)存優(yōu)化方面進(jìn)行解析,非常推薦!需要的朋友可以參考下2015-11-11
Swift 4 在 Swift 3 的基礎(chǔ)上，提供了更強(qiáng)大的穩(wěn)健性和穩(wěn)定性。所以下面這篇文章就來給大家總結(jié)介紹關(guān)于Swift4新特性的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-11-11
這篇文章主要介紹了Swift教程之下標(biāo)詳解,本文講解了下標(biāo)語法、下標(biāo)的使用、下標(biāo)選項(xiàng)等內(nèi)容,需要的朋友可以參考下2015-01-01
Swift實(shí)現(xiàn)復(fù)數(shù)計(jì)算器
這篇文章主要為大家詳細(xì)介紹了Swift實(shí)現(xiàn)復(fù)數(shù)計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
SwiftUI?引導(dǎo)頁界面實(shí)現(xiàn)示例
這篇文章主要為大家介紹了SwiftUI?引導(dǎo)頁界面實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要給大家介紹了Swift中訪問控制關(guān)鍵字的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。2017-03-03