实现宽高自适应的WKWebView，如何避免帧二次更新影响用户体验

你当前的方案存在跳变问题，核心原因是didFinish回调触发时，页面仅完成了资源加载，还未完成完整渲染，此时获取的contentSize可能不准，且初始300*250的视图已经渲染完成再修改尺寸，必然会出现二次更新的视觉跳变。推荐以下两种更稳定的实现方案：

方案1：KVO监听contentSize动态更新（最常用） #

通过监听WKWebView内部scrollView的内容高度变化，只要高度更新就同步调整视图约束，更新时机更早，适配更及时，配合动画过渡几乎无感知。

注意不要直接修改bounds，优先用Auto Layout约束更新，避免布局错乱

实现步骤： #

1. 声明高度约束属性，初始化webview时绑定约束

// 声明全局高度约束属性
var webViewHeightConstraint: NSLayoutConstraint!

// 初始化WKWebView时配置约束
let webView = WKWebView()
webView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(webView)
// 初始高度设为默认250，符合大多数场景的固定尺寸要求
webViewHeightConstraint = webView.heightAnchor.constraint(equalToConstant: 250)
NSLayoutConstraint.activate([
    webView.widthAnchor.constraint(equalToConstant: 300),
    webViewHeightConstraint,
    // 其他位置约束（top/leading等）按需补充
])
// 注册contentSize的KVO监听
webView.scrollView.addObserver(self, forKeyPath: "contentSize", options: [.new], context: nil)

2. 实现KVO回调，高度变化时更新约束

override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
    guard keyPath == "contentSize", 
          let scrollView = object as? UIScrollView, 
          scrollView.superview is WKWebView else {
        super.observeValue(forKeyPath: keyPath, of: object, change: change, context: context)
        return
    }
    let targetHeight = max(250, scrollView.contentSize.height)
    // 避免相同高度重复更新
    if webViewHeightConstraint.constant != targetHeight {
        webViewHeightConstraint.constant = targetHeight
        // 加0.2s过渡动画，完全消除跳变感知
        UIView.animate(withDuration: 0.2) {
            self.view.layoutIfNeeded()
        }
    }
}

3. 页面销毁时移除监听，避免崩溃

deinit {
    webView.scrollView.removeObserver(self, forKeyPath: "contentSize")
}

方案2：JS注入获取文档高度（精度更高） #

如果页面存在懒加载内容，KVO监听可能会多次触发，此时可以通过注入JS获取完整文档高度，精度更高：

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    // 执行JS获取整个文档的真实高度
    webView.evaluateJavaScript("document.documentElement.scrollHeight") { [weak self] result, error in
        guard let self = self, 
              let height = result as? CGFloat, 
              error == nil else { return }
        let targetHeight = max(250, height)
        if self.webViewHeightConstraint.constant != targetHeight {
            self.webViewHeightConstraint.constant = targetHeight
            UIView.animate(withDuration: 0.2) {
                self.view.layoutIfNeeded()
            }
        }
    }
}

额外优化建议 #

如果服务端返回的响应头/响应参数里可以提前标注当前内容是否需要自适应高度，固定尺寸的场景可以直接关闭高度监听，完全不会出现二次更新问题。

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