应用场景:根据后台返回的HTML代码,用WKWebView加载,顶部和底部自定义UI,如图所示
实现思路:
- 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)