iOS开发漫话WKWebView之动态获取⽹页⾼度
最近在项⽬开发中遇到⼀个需求，⼀篇⽂章顶部的分析师信息以及底部的评论和回复以及⽂本框信息采⽤原⽣展⽰，中间的主体内容采⽤Vue框架做的H5展⽰。这⾥⾥⾯唯⼀的遇到的问题就是动态计算H5⽹页的⾼度，使得页⾯整体如⼀，不会有⼿势冲突。整体效果如下图：
经过搜索资料整理，基本有两种思路，⼀是通过在didFinish⾥⾯注⼊Js脚本获取页⾯的scrollHeight，⼆是通过iOS的KVO模式监听contentSize的值(也有注⼊Js来监听的，操作有难度)。在不同⽹页和不同系统中测试，KVO模式能实现需求⽽且⾼度准确⽆误。现将主要参考代码列出如下：
1、定义WKWebView并添加contentSize监听
import WebKit
private let content_size_key = "contentSize"
private let ScreenWidth: CGFloat = UIScreen.main.bounds.size.width
private lazy var wkWebView:WKWebView = {[unowned self] in
let _wk = WKWebView.init(frame: .zero)
//监听
_wk.scrollView.addObserver(self,
forKeyPath: content_size_key,
options: w, context: nil)
return _wk
view ui框架}()
2、实现监听存储⾼度值
//MARK: - KVO 监听
override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
//根据内容的⾼重置webView视图的⾼度
guard let webCGSize = change?[wKey] as? CGSize  else {
return
}
//[S] 此处代码是处理在iOS13.6中 contentSize ⾼度偏⾼产⽣⼤量空⽩的
var _h:CGFloat = webCGSize.height
if webCGSize.width > ScreenWidth {
_h = (ScreenWidth / webCGSize.width) * _h
}
//[E]
if !ains(_h) {
self.arrHeights.append(_h)
}
}
3、更新UI
private lazy var arrHeights = [CGFloat]() {
didSet{
if unt > 0 {
if let _h = self.arrHeights.sorted(by: { return $0 > $1 }).first {
self.updateWebViewFor(Height: _h)
}
}
}
}
/// 更新⾼度(也有通过约束来更新，殊途同归)
/// - Parameter h: CGFloat
func updateWebViewFor(Height h:CGFloat){
DispatchQueue.main.async {
var rect = self.wkWebView.frame
rect.size.height = h
self.wkWebView.frame = rect
//headView是UITableView 的 tableHeaderView
//wkWebView 是headView的⼀部分
rect = self.headView.frame
rect.size.height = SpecialColumnMainView.section_head_height2 + 30 + h
self.headView.frame = rect
loadData()
}
}
4、销毁移除监听
deinit {
self.veObserver(self, forKeyPath: content_size_key, context: nil)
}
补充，⽹络上有⼤量KVO监听contentSize ⾼度不准确的问题，本⽂中已解决，详见⽂中注释
本⽂结束，OC版的可照此操作，有问题可以留⾔咨询。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。