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: NSKeyValueObservingOptions.new, context: nil)
        
        return _wk
}()           

2、實作監聽存儲高度值

//MARK: - KVO 監聽
    override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
        
        //根據内容的高重置webView視圖的高度
        guard let webCGSize = change?[NSKeyValueChangeKey.newKey] as? CGSize  else {
            return
        }

        //[S] 此處代碼是處理在iOS13.6中 contentSize 高度偏高産生大量空白的
        var _h:CGFloat = webCGSize.height
        if webCGSize.width > ScreenWidth {
            _h = (ScreenWidth / webCGSize.width) * _h
        }
        //[E]
        
        if !self.arrHeights.contains(_h) {
            self.arrHeights.append(_h)
        }
    }           

3、更新UI

private lazy var arrHeights = [CGFloat]() {
   didSet{
       if self.arrHeights.count > 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
            
          self.listTableView.reloadData()
    }
}           

4、銷毀移除監聽

deinit {
        self.wkWebview.scrollView.removeObserver(self, forKeyPath: content_size_key, context: nil)
    }           

補充，網絡上有大量KVO監聽contentSize 高度不準确的問題，本文中已解決，詳見文中注釋

準确擷取H5網頁的高度有個前提，就是防止網頁高度塌陷，具體請參考：https://blog.csdn.net/weixin_39851592/article/details/83622716

本文結束，OC版的可照此操作，有問題可以留言咨詢。