iOS WKWebView点击页面链接加载时如何显示SVProgressHUD加载提示？

你当前的代码仅在首次页面加载、下拉刷新时手动调用了SVProgressHUD.show()，而点击网页内部链接触发的新加载动作，没有对应回调触发HUD显示。补充WKNavigationDelegate的对应生命周期回调即可实现需求。

调整步骤 #

• 补充webView(_:didStartProvisionalNavigation:)代理方法：该方法会在WKWebView每次开始加载新内容（包括内部链接跳转、表单提交等触发的加载行为）时调用，在这里显示加载提示。
• 补充加载失败的代理方法webView(_:didFail:withError:)：避免加载出错时HUD一直展示不消失。
• 可选优化：把SVProgressHUD的公共样式配置抽为独立方法，避免重复代码。
• 细节优化：原有加载成功的回调中，不要调用完showSuccess后立刻dismiss，增加短延时让用户能看到成功提示。

修改后的完整代码 #

class ViewController: UIViewController, WKNavigationDelegate {
    @IBOutlet weak var webView:WKWebView?

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        setNeedsStatusBarAppearanceUpdate()
    }
    override var preferredStatusBarStyle: UIStatusBarStyle {
        .lightContent
    }

    override func viewDidLoad()
    {
        super.viewDidLoad()
        webView?.navigationDelegate = self
        // 统一配置HUD样式
        setupHUD()
        // 首次加载
        let request = URLRequest(url: URL(string: "https://luhom-app.com/")!)
        webView?.load(request)

        let refreshControl = UIRefreshControl()
        refreshControl.addTarget(self, action: #selector(reloadWebView(_:)), for: .valueChanged)
        refreshControl.backgroundColor = #colorLiteral(red: 0.3466703892, green: 0.7427461743, blue: 0.6237300038, alpha: 1)
        webView?.scrollView.addSubview(refreshControl)
    }
    
    // 抽离HUD公共配置
    private func setupHUD() {
        SVProgressHUD.setBackgroundColor(#colorLiteral(red: 0.3466703892, green: 0.7427461743, blue: 0.6237300038, alpha: 1))
        SVProgressHUD.setForegroundColor(#colorLiteral(red: 1, green: 1, blue: 1, alpha: 1))
        SVProgressHUD.setMinimumSize(CGSize(width: 120, height: 120))
        SVProgressHUD.setRingThickness(7.0)
        SVProgressHUD.setRingRadius(CGFloat(40.0))
    }

    @objc func reloadWebView(_ sender: UIRefreshControl) {
        webView?.reload()
        SVProgressHUD.show(withStatus: "Refreshing ...")
        sender.endRefreshing()
    }
    
    // 每次开始加载新内容触发，包括点击内部链接
    func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
        SVProgressHUD.show(withStatus: "Loading ...")
    }

    // 加载成功
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        DispatchQueue.main.async {
            SVProgressHUD.showSuccess(withStatus: "Done!")
            // 增加0.5秒延时，让用户看到成功提示
            SVProgressHUD.dismiss(withDelay: 0.5)
        }
    }
    
    // 加载失败
    func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
        DispatchQueue.main.async {
            SVProgressHUD.showError(withStatus: "Load failed")
            SVProgressHUD.dismiss(withDelay: 1)
        }
    }
}

内容的提问来源于stack exchange，提问作者HATIM