如何给WKWebView添加头部视图尾部视图

应用场景：根据后台返回的HTML代码，用WKWebView加载，顶部和底部自定义UI,如图所示

header.png

footer.png

实现思路：

• 1.添加CSS样式，空出头部和尾部的间距
• 2.把自定义的头部视图添加到webView.scrollView上
• 3.在WKWebView的代理方法中计算出尾部视图的frame

核心代码：

// webHeadViewH 头部视图高度
// kScreenW-15 图片的宽度
// model.desc! 后台返回的HTML代码
// webFooterViewH 尾部视图的高度

// 调节文字和图片大小来适配屏幕
let resizeHTML = String.init(format: "<p style='padding-top:%fpx;'></p><meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'><meta name='apple-mobile-web-app-capable' content='yes'><meta name='apple-mobile-web-app-status-bar-style' content='black'><meta name='format-detection' content='telephone=no'><style type='text/css'>img{width:%fpx}</style>%@<p style='padding-bottom:%fpx;'></p>", webHeadViewH,kScreenW-15,model.desc!,webFooterViewH)
        
webView.loadHTMLString(resizeHTML, baseURL: nil)

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    
    // WKWebView禁止放大缩小(捏合手势)
    let injectionJSString : String = "var script = document.createElement('meta');script.name = 'viewport';script.content=\"width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no\";document.getElementsByTagName('head')[0].appendChild(script);"
    webView.evaluateJavaScript(injectionJSString, completionHandler: nil)

    //获取网页高度(这个高度包含了头部视图和尾部视图的高度)
    webView.evaluateJavaScript("document.body.offsetHeight;") { (object, errros) in
        if let error = errros {
           printLog(error.localizedDescription)
        }else{
            let documentHeight : CGFloat = object as! CGFloat
            self.footer.isHidden = false
            self.footer.frame = CGRect.init(x: 12, y: documentHeight-self.webFooterViewH, width: kScreenW, height: self.webFooterViewH)
        }
    }
}

详情参考：自己封装的WKWebView（OC）