iOS – WKWebView笔记(1) — 基本使用

WKWebView笔记 — 基本使用

WebKit框架

  • WKWebView:网页的渲染与展示,通
  • WKWebViewConfiguration可以进行自定义配置。
  • WKWebViewConfiguration:这个类专门用来配置WKWebView。
  • WKPreference:这个类用来进行相关webView设置。
  • WKProcessPool:这个类用来配置进程池,与网页视图的资源共享有关。
  • WKUserContentController:这个类主要用来做native与JavaScript的交互管理。
  • WKUserScript:用于进行JavaScript注入。
  • WKScriptMessageHandler:这个类专门用来处理JavaScript调用native的方法。
  • WKNavigationDelegate:网页跳转间的导航管理协议,这个协议可以监听网页的活动。
  • WKNavigationAction:网页某个活动的示例化对象。
  • WKUIDelegate:用于交互处理JavaScript中的一些弹出框。
  • WKBackForwardList:堆栈管理的网页列表。
  • WKBackForwardListItem:每个网页节点对象。

接下来通过实现一下功能去了解WKWebView的基本使用。

  1. 加载网页
  2. 进度条
  3. 前进、后退

具体实现

1. 加载网页

实例化一个WKWebView对象,加载request。

override func viewDidLoad() {
    super.viewDidLoad()

    view.addSubview(webView)
    
    webView.load(URLRequest(url: URL(string: "https://xuzhengke.cn")!))
}
    
private lazy var webView: WKWebView = {
    let webView = WKWebView(frame: view.frame)
    
    return webView
}()

2. 进度条

open var estimatedProgress: Double { get }

WKWebView 有一个属性estimatedProgress表示当前的加载进度,这个属性的值为(0.0 – 1.0)。当网页加载完成后始终为1.0,直到新的请求加载时才恢复到0.0。

可以通过KVO的方式去监听进度属性的变化。


// 为estimatedProgress添加KVO
webView.addObserver(self, forKeyPath: "estimatedProgress", options: [.old, .new], context: nil)

// 监听网络加载进度,加载过程中在navigationBar显示加载进度,加载完成显示网站标题

override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
    if let webView = object as? WKWebView, webView == self.webView && keyPath == "estimatedProgress" {
    
        guard let change = change,
            let progress = change[.newKey] as? Double else { return }
        
        if progress >= 1.0 {
            // 加载完成
            navigationItem.title = webView.title ?? ""
        } else {
            // 加载中
            navigationItem.title = "\(Int(progress * 100))%"
        }
    }
}


// 记得在结束时移除KVO
deinit {
    webView.removeObserver(self, forKeyPath: "estimatedProgress")
}

效果展示


因为对进度采用的是KVO的方式,所以当点击页面内的链接地址时,也会监听进度的变化。

3. 前进,后退

WKWebView 存在两个属性,用来判断是否可以前进或者后退,也可以重新加载,停止加载等操作。

open var canGoBack: Bool { get }

open var canGoForward: Bool { get }

同时存在两个方法可以使WKWebView进行前进后退操作。

open func goBack() -> WKNavigation?

open func goForward() -> WKNavigation?

open func reload() -> WKNavigation?

open func stopLoading()

例如,返回上一个页面

// 后退
@objc func backAction() {
    if webView.canGoBack {
        webView.goBack()
    } else {
        print("无法返回")
    }
}
// 是否允许通过手势前进后退页面
// 默认值为false
open var allowsBackForwardNavigationGestures: Bool

WKWebView还自带了侧滑前进后退的功能,只需要设置为true即可使用手势操作界面

webView.allowsBackForwardNavigationGestures = true

查看所有back或者forward列表

open var backForwardList: WKBackForwardList { get }

WKWebView有一个只读属性 backForwardList, 该属性里面包含如下属性。

// 当前item
open var currentItem: WKBackForwardListItem? { get }
// 上一个item
open var backItem: WKBackForwardListItem? { get }
// 下一个item
open var forwardItem: WKBackForwardListItem? { get }

// back列表
open var backList: [WKBackForwardListItem] { get }
// forward列表
open var forwardList: [WKBackForwardListItem] { get }

WKBackForwardListItem 结构

open var url: URL { get }

open var title: String? { get }

// 创建该请求的最初url
open var initialURL: URL { get }

例如打印可返回网页列表

// 历史
@objc func historyAction() {
    print("返回列表")
    for item in webView.backForwardList.backList {
        print( (item.title ?? "") + " -- " + item.url.absoluteString)
    }
}

最终页面效果