WKWebView添加头视图遇到的坑

前言

由于WKWebview的功能强大、UIWebview更占内存、iOS12中UIWebView的废弃等诸多原因，使得WKWebview备受欢迎，但是其中也有许多坑

坑

笔者想在WKWebview上添加个headerView，如商品详情页中富文本上面的商品信息，方法有两种，一是利用JS代码修改富文本添加相关视图，二是在WKWebview的ScrollView上设置偏移量并添加View

let headHeight = 100
webView.scrollView.addSubview(header)
webView.scrollView.contentInset = UIEdgeInsets(top: headHeight, left: 0, bottom: 0, right: 0)

但是添加完头视图之后再加载富文本，WKWebView会跳动一下（闪一下）,具体原因是网页加载的时候，scrollViewDidScroll会走两遍，第一次的ScrollView.contentOffset是不准确的

解决方法

1.WKWebView的alpha设置alpha=0，然后在网页加载结束的时候将alpha设置alpha=1

web.alpha = 0
web.backgroundColor = .white
web.navigationDelegate = self

遵守WKNavigationDelegate

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    UIView.animate(withDuration: 0.3) {
        webView.alpha = 1
    }
}

笔者目测淘宝现阶段的效果就是这样：点击商品详情->出现底部工具栏+白色webView+loading圈->加载完毕，出现正常webView，loading圈消失

2.控制ScrollView.contentOffset的值
既然问题出现的原因在于第一次scrollViewDidScroll时ScrollView.contentOffset不准确，那么就可以遵守UIScrollViewDelegate控制scrollViewDidScroll

//全局定义webview(富文本)高度 & 是否正在加载
var webheight: CGFloat = 0.0
var isLoading: Bool = true

web.scrollView.delegate = self
web.navigationDelegate = self

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    // 获取内容实际高度
    webView.evaluateJavaScript("document.body.scrollHeight") { [unowned self] (result, error) in        
        if let tempHeight: CGFloat = result as? CGFloat {
            // isLoading置否，且获取webHeight
            self.isLoading = false
            self.webheight = tempHeight
        }
    }
}

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    guard isLoading else {
        webView.scrollView.contentSize = CGSize(width: ScreenWidth, height: headHeight + webheight)
        return
    }
    webView.scrollView.contentSize = CGSize(width: 0, height: 0)
}

加载时webView的滑动区域为0，使其不可滑动，就不会出现页面闪一下的情况；加载完之后重新设置webView的滚动区域，就能达到我们的需求了