程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 更多編程語言 >> 更多關於編程 >> Swift應用WKWebView在iOS運用中挪用Web的辦法詳解

Swift應用WKWebView在iOS運用中挪用Web的辦法詳解

編輯:更多關於編程

Swift應用WKWebView在iOS運用中挪用Web的辦法詳解。本站提示廣大學習愛好者:(Swift應用WKWebView在iOS運用中挪用Web的辦法詳解)文章只能為提供參考,不一定能成為您想要的結果。以下是Swift應用WKWebView在iOS運用中挪用Web的辦法詳解正文


自從iOS8開端,Apple引入了WKWebView欲取代UIWebView。比擬而言,WKWebView消費內從更少,功效也加倍壯大。讓我們來看看WKWebView怎樣應用吧!

0.初始化
(1)起首須要引入WebKit庫

#import <WebKit/WebKit.h>

(2)初始化辦法分為以下兩種

// 默許初始化
- (instancetype)initWithFrame:(CGRect)frame;
// 依據對webview的相干設置裝備擺設,停止初始化
- (instancetype)initWithFrame:(CGRect)frame configuration:(WKWebViewConfiguration *)configuration NS_DESIGNATED_INITIALIZER;

(3)加載網頁與HTML代碼的方法與UIWebView雷同,代碼以下:

WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.bounds];
[webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.百度.com"]]];
[self.view addSubview:webView];

1. WKWebView的署理辦法
(1) 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;

(2)WKUIDelegate

// 創立一個新的WebView
- (WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures;

剩下三個署理辦法全都是與界面彈出提醒框相干的,針關於web界面的三種提醒框(正告框、確認框、輸出框)分離對應三種署理辦法。上面只舉了正告框的例子。

/**
 *  web界面中有彈出正告框時挪用
 *
 *  @param webView           完成該署理的webview
 *  @param message           正告框中的內容
 *  @param frame             主窗口
 *  @param completionHandler 正告框消逝挪用
 */
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(void (^)())completionHandler;

(3)WKScriptMessageHandler
這個協定中包括一個必需完成的辦法,這個辦法是進步App與web端交互的症結,它可以直接將吸收到的JS劇本轉為OC或Swift對象。(固然,在UIWebView也能夠經由過程“曲線救國”的方法與web停止交互,有名的Cordova框架就是這類機制)

// 從web界面中吸收到一個劇本時挪用
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message;

2.修正Info.plist
留意從iOS9開端,但凡觸及到收集操作的,都要在Info.plist中參加:

3.加載網頁
先要在ViewController 導入WebKit:

import WebKit

然後:

var webview = WKWebView()
override func viewDidLoad() {
  super.viewDidLoad()
    //創立wkwebview
    let webview = WKWebView(frame: CGRectMake(0, 0, self.view.frame.width, self.view.frame.height))
    //創立網址
    let url = NSURL(string: "http://www.jianshu.com/users/040395b7230c/latest_articles")
    //創立要求
    let request = NSURLRequest(URL: url!)
    //加載要求
    webview.loadRequest(request)
    //添加wkwebview
    self.view.addSubview(webview)
}

運轉後果如圖:

4.獲得網頁題目
為了顯示題目,起首給ViewController嵌入一個NavigationController。有了導航欄後,我們要調劑一下webview的y軸地位,避免導航欄遮住網頁下面部門,在viewDidLoad()裡寫上:

//獲得導航欄高度
let navHeight = self.navigationController?.navigationBar.frame.height
//獲得狀況欄高度
let statusHeight = UIApplication.sharedApplication().statusBarFrame.height
webview = WKWebView(frame: CGRectMake(0, statusHeight+navHeight!,self.view.frame.width, self.view.frame.height))

其次,這裡要用到WKNavigationDelegate,所以在viewDidLoad()裡加上

self.webview.navigationDelegate = self

留意網頁題目要在網頁加載完成後能力獲得,不然為空,因而我們用到'處置網頁加載完成'這個辦法:

func webView(webView: WKWebView, didFinishNavigation navigation: WKNavigation!) {
    self.navigationItem.title = self.webview.title
  }

運轉後果如圖:

5.進步和撤退退卻
起首我們要在navgationBar上添加進步和撤退退卻按鈕:

var btnBack = UIBarButtonItem()
var btnForward = UIBarButtonItem()
func setNavBar() {
  btnBack = UIBarButtonItem(title: "撤退退卻", style: UIBarButtonItemStyle.Plain, target: self, action: "toBack")
  btnForward = UIBarButtonItem(title: "進步", style: UIBarButtonItemStyle.Plain, target: self, action: "toForward")
  self.navigationItem.leftBarButtonItem = btnBack
  self.navigationItem.rightBarButtonItem = btnForward
  }

然後我們用到了goBack()和goForward()辦法,在進步或撤退退卻之前我們要斷定一下網頁能否可以或許進步或撤退退卻:

func toBack() {
   if self.webview.canGoBack {
     self.webview.goBack()
    }
  }

func toForward() {
  if self.webview.canGoForward {
    self.webview.goForward()
    }
}

最初在viewDidLoad()裡加上挪用setNavBar()辦法:

setNavBar()

運轉後果如圖:

6.修正網頁設置裝備擺設
如今,一個看似很簡略的閱讀器完成了,但假如我們把網址換成:
http://csol2.tiancity.com/homepage/article/Class_1166_Time_1.html
即在viewDidLoad()裡修正:

let url = NSURL(string: "http://csol2.tiancity.com/homepage/article/Class_1166_Time_1.html")

我們會發明網頁上列內外的文字,包含頂欄上的文字點擊了沒反響,成績出在哪裡呢?這是由於體系阻攔了不平安的銜接。怎樣處理呢?我們就要用到WKUIDelegate中的createWebViewWithConfiguration()這個辦法讓其許可導航,起首我們要設置本身署理,在viewDidLoad()裡加上:

self.webview.UIDelegate = self

其次:

func webView(webView: WKWebView, createWebViewWithConfiguration configuration: WKWebViewConfiguration, forNavigationAction navigationAction: WKNavigationAction, windowFeatures: WKWindowFeatures) -> WKWebView? {
     //假如目的主視圖不為空,則許可導航
  if !(navigationAction.targetFrame?.mainFrame != nil) {
    self.webview.loadRequest(navigationAction.request)
    }
  return nil
  }

運轉一下,發明點擊跳轉了!

7.處置js的提醒框
如今把網址修正為

http://evt.tiancity.com/csol2/1565/home/index.php
即在viewDidLoad()裡修正:

let url = NSURL(string: "http://evt.tiancity.com/csol2/1565/home/index.php")

往下拉,點擊'立刻支付',本應當湧現提醒框,卻發明甚麼也沒產生。為此,我們要處置一下js的提醒框事宜。還記得一開端提到的誰人辦法吧,以下:

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)
  }

這裡要創立一個正告框來顯示,如今再運轉一下看看?!

8.添加進度條
我們曉得UIWebView是沒法獲得網頁加載的進度的,因而也就沒法創立進度條了,固然我們可以以某種算法模仿網頁加載,本身設置進度條的值。而WKWebView卻供給了獲得網頁加載進度的辦法,支撐KVO,也就是estimatedProgress。別的還有loading能否正在加載和title頁面題目。
我們得創立一個進度條:

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)

然後給網頁添加監聽進度,異樣在viewDidLoad()裡:

self.webview.addObserver(self, forKeyPath: "estimatedProgress", options: NSKeyValueObservingOptions.New, context: nil)

再處置KVO:

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)
         //進度條的值最年夜為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
        })
      }
    }
}

這裡設置進度條的值很主要,由於我們發明,其實進度條的值總比網頁加載的現實值慢一些,二者其實不同步。假如你不添加動畫使進度條加載完成後消逝,你會發明進度條還沒到最左邊半途就不見了。所以我們要用個動畫來完成。另外,假如把self.progBar.progress = 0這句語句,即清零的功效放到其余辦法中去,好比說放到開端導航的時刻來清零,你會發明進度條的動畫有成績,會往返轉。總之,怎樣處置進度條的動畫很講求,我試了很多多少次發明這個辦法絕對來講穩固一些。所以我建議年夜家可以換個進度條的款式,即不依附於值的顯示,如可以轉圈圈等等。如今有很多多少第三方庫可使用,年夜家可以上cocoapods去查找。

還有一點別忘了,關於KVO形式,有add必定要remove,不然會瓦解。我們可以在視圖消逝的時刻添加remove:

override func viewWillDisappear(animated: Bool) {
  webview.removeObserver(self, forKeyPath: "estimatedProgress")
  }
 
年夜家可以換些網址嘗嘗!

9.終究後果圖

10.總結
WKWebView的簡略應用就引見到這裡了!年夜家有興致可認為其添加更多功效!假如愛好本文的話別忘了點擊愛好哦!

跋文
既然說WKWebView比擬UIWebView消費的內存更少,那末我們就來現實比較一下,我們讓它們加載統一個網站,成果如圖
(左為UIWebView,右為WKWebView):

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved