【iOS开发】WKWebView遇上UIScrollView，动态获取WKWebView的高度

开发过程中经常会碰到这样的需求，顶部是自定义的UIView,下面是使用webView,然后实现一起滚动。需求如下图：

[图片上传失败...(image-49b65c-1531367583533)]

实现思路也简单，可以使用UIScrollView为父视图，自定义view和webView作为子视图，或者使用UITableView,自定义view作为tableHeaderView，webView添加到UITableViewCell上。关键是如何获取高度。这里通过监听webView的contentSize的变化来获取高度，然后更新webView的高度，进而更新UIScrollView的可滚动区域实现滚动。

image.png

具体demo实现，实现方式采用UIScrollView + Snapkit布局

import UIKit
import SnapKit
import WebKit
 
class ViewController: UIViewController {
    
    lazy var webView: WKWebView = {
        let web = WKWebView()
        web.navigationDelegate = self
        web.scrollView.isScrollEnabled = false
        web.scrollView.bounces = false
        return web
    }()
    lazy var scrollView: UIScrollView = {
        let scroll = UIScrollView()
        return scroll
    }()
    lazy var contentView: UIView = {
        return UIView()
    }()
    lazy var customView: UILabel = {
        let label = UILabel()
        label.numberOfLines = 0
        label.backgroundColor = UIColor.gray
        return label
    }()
    var observing = false
 
    override func viewDidLoad() {
        super.viewDidLoad()
        addSubViews()
        addConstraints()
        loadWebView()
    }
    
    func addSubViews() {
        view.addSubview(scrollView)
        scrollView.addSubview(contentView)
        contentView.addSubview(customView)
        contentView.addSubview(webView)
    }
    
    func addConstraints() {
        scrollView.snp.makeConstraints { (make) in
            make.left.right.top.bottom.equalToSuperview()
        }
        contentView.snp.makeConstraints { (make) in
            make.top.bottom.equalToSuperview()
            make.left.right.equalTo(view)
        }
        customView.snp.makeConstraints { (make) in
            make.left.right.top.equalToSuperview().inset(20)
        }
        webView.snp.makeConstraints { (make) in
            make.left.right.equalToSuperview().inset(20)
            make.top.equalTo(customView.snp.bottom).offset(20)
            make.height.equalTo(400)
            make.bottom.equalToSuperview().offset(-20) // 需要设置距离底部的约束，否则无法计算contentSize
        }
    }
    
    func addWebViewObserver() {
        observing = true
        webView.scrollView.addObserver(self, forKeyPath: "contentSize", options: .new, context: nil)
    }
    
    func removeWebViewObserver() {
        webView.scrollView.removeObserver(self, forKeyPath: "contentSize", context: nil)
        observing = false
    }
    
    func loadWebView() {
        customView.text = "在强者的眼中，没有最好，只有更好。盆景秀木正因为被人溺爱，才破灭了成为栋梁之材的梦。永远都不要放弃自己，勇往直前，直至成功！没有平日的失败，就没有最终的成功。重要的是分析失败原因并吸取教训。蝴蝶如要在百花园里得到飞舞的欢乐，那首先得忍受与蛹决裂的痛苦。萤火虫的光点虽然微弱，但亮着便是向黑暗挑战。面对人生旅途中的挫折与磨难，我们不仅要有勇气，更要有坚强的信念。对坚强的人来说，不幸就像铁犁一样开垦着他内心的大地，虽然痛，却可以播种。想而奋进的过程，其意义远大于未知的结果。"
        
        webView.load(URLRequest(url: URL(string: "https://www.baidu.com/")!))
    }
    
    func updateWebViewHeight(_ height: CGFloat) {
        webView.snp.updateConstraints { (make) in
            make.height.equalTo(height)
        }
    }
    
    override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
        guard let keyPath = keyPath else {
            super.observeValue(forKeyPath: nil, of: object, change: change, context: context)
            return
        }
        if keyPath == "contentSize" {
            updateWebViewHeight(webView.scrollView.contentSize.height)
        }
    }
    
    deinit {
       removeWebViewObserver()
    }
}
 
extension ViewController: WKNavigationDelegate {
    // 网页加载完成，开始监听内容高度变化,不断更新高度，增大滚动区域
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        updateWebViewHeight(webView.scrollView.contentSize.height)
        if (!observing) { addWebViewObserver() }
    }

    func webView(_ webView: WKWebView, didReceive challenge: URLAuthenticationChallenge, completionHandler: @escaping (URLSession.AuthChallengeDisposition, URLCredential?) -> Void) {
        let cred = URLCredential.init(trust: challenge.protectionSpace.serverTrust!)
        completionHandler(.useCredential, cred)
    }
}

代码简单，关键是注意几点：

1）通过添加容器视图contentView为scrollView自动计算滚动区域，不熟悉的可以看我前面一篇文章。

2）在网页加载吃完之后开始监听contentSize的变化，并不断更新webView的高度。这里会监听到contentSize不断的变化，因为内容在不断的加载，所以值也在不断变化，而且很多相同的值。自己可以对相同的值进行过滤操作，减少不必要的操作。如下部分高度值：

1908.0

4272.0

...

3）实际的开发过程中，往往有可能是先加载本地的html，或者服务端给的一段html内容，然后请求数据，再向html中插入内容。在这种情况下，有时候最终的显示的滚动视图可能是对的，滚动到底部能够看到所有的内容，但是有时候也可能出现滚动的区域大于有效的显示内容。即所有内容看完之后还会存在一部分高度导致空白部分。会出现这种情况是因为加载的内容包含了图片，由于图片的加载和显示问题，当图片的大小和实际显示的大小显示不一致，导致了webView再监听contentSize的时候，出现了最大的contentSize之后，对于小的contentSize我们将获取不到，从而没有更新webView的高度，导致部分空白现象。这种情况可以跟前端讨论，处理图片的加载流程，保证高度内容一步一步增大。这样，我们就能够监听到正确的高度并显示。

实现效果图如下：