如何在 SwiftUI 中观察 WKWebView 的加载进度？答案

【问题标题】：How to observe loading progress for WKWebView in SwiftUI?如何在 SwiftUI 中观察 WKWebView 的加载进度？
【发布时间】：2020-09-21 04:36:37
【问题描述】：

我正在使用 SwiftUI 构建一个 Web 浏览器，并将视图分为 3 个部分：SearchView、WebView (UIViewRepresentable)。

在 SearchView 中，我有 @Binding var query，它在 TextField 的 onCommit 方法上得到更新。 WebView 有@Binding var query 和@Binding var loadingProgress。当查询和进度都更新时，正确知道 webView 更新。如何过滤这些事件并且不重新加载 webView 以进行进度更改？

我想我需要使用updateUIView(_ uiView: WKWebView, context: Context) 方法，但我不知道如何实现这个逻辑。或者也许所有的概念都是错误的？

这是我的网页视图

struct BrowserWebView: UIViewRepresentable {
    
var webView = WKWebView()

@Binding var query: String
@Binding var loadingProgress: Float

func makeUIView(context: Context) -> WKWebView {
    context.coordinator.addProgressObserver()
    webView.navigationDelegate = context.coordinator
    return webView
}

func updateUIView(_ uiView: WKWebView, context: Context) {
    loadQuery()
}

private func loadQuery() {
    guard let url = URL(string: query) else { return }
    let request = URLRequest(url: url)
    webView.load(request)
}

func makeCoordinator() -> Coordinator {
    return Coordinator(self)
}

class Coordinator: NSObject, WKNavigationDelegate {
    var parent: BrowserWebView
    
    init(_ parent: BrowserWebView) {
        self.parent = parent
    }
    
    func addProgressObserver() {
        parent.webView.addObserver(self, forKeyPath: #keyPath(WKWebView.estimatedProgress), options: .new, context: nil)
    }
    
    override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
        if let o = object as? WKWebView, o == parent.webView {
            if keyPath == #keyPath(WKWebView.estimatedProgress) {
                parent.loadingProgress = Float(parent.webView.estimatedProgress)
            }
        }
    }
  }
}

在外面我有更新 ProgressView 的 @State 属性

【问题讨论】：

标签： swift swiftui wkwebview uiviewrepresentable

【解决方案1】：

您可以简单地将 webview 的当前 url 字符串与查询进行比较以跳过重新加载，例如：

func updateUIView(_ uiView: WKWebView, context: Context) {
    guard let url = URL(string: query) else { return }
    if uiView.url == nil || uiView.url?.absoluteString.trimmingCharacters(in: CharacterSet(arrayLiteral: "/")) != query {
        let request = URLRequest(url: url)
        uiView.load(request)
    }
}

【讨论】：