WKWebView遇上UIScrollView，动态获取WKWebView的高度

来源：互联网发布：法国盐之花淘宝编辑：程序博客网时间：2024/05/22 02:02

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

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

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

import UIKitimport SnapKitimport WebKitclass 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() }    }}

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

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

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

1908.0

4272.0

...

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

实现效果图如下：

阅读全文

0 0