Hello，好久不见啦，今天给大家分享一下WKWebView的使用，先看看效果吧
WKWebView.gif
一、WKWebView和UIWebView的简单介绍
如果大家对UIWebView和WKWebView还不是很了解，大家可以参考一下这篇：【iOS开发】从 UIWebView 到 WKWebView
二、动态监听WKWebView的高度
首先，我们来创建一个WKWebView
lazy var newsWebView: WKWebView = {
let newsWebView = WKWebView(frame: CGRect(x: 0, y: 0, width: kScreen_width, height: kScreen_height))
newsWebView.backgroundColor = UIColor.clear
newsWebView.isOpaque = false
newsWebView.uiDelegate = self
newsWebView.navigationDelegate = self
newsWebView.scrollView.isScrollEnabled = false
newsWebView.scrollView.showsVerticalScrollIndicator = false
return newsWebView
}()
实现WKWebView的代理
func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
SVProgressHUD.setDefaultMaskType(.none)
SVProgressHUD.show(withStatus: "加载中")
SVProgressHUD.dismiss(withDelay: 10)
}
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
SVProgressHUD.dismiss()
}
监听WKWebView
// 获取高度
func resetWebViewFrameWidthHeight(height: CGFloat) {
// 如果是新高度，那就重置
if height != webContentHeight {
if height >= kScreen_height {
newsWebView.frame = CGRect(x: 0, y: 0, width: kScreen_width, height: kScreen_height)
} else {
newsWebView.frame = CGRect(x: 0, y: 0, width: kScreen_width, height: height)
}
newsTableView.reloadData()
webContentHeight = height
}
}
// 监听
override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
// 根据内容的高度重置webview视图的高度
let newHeight = wbScrollView?.contentSize.height
resetWebViewFrameWidthHeight(height: newHeight!)
}
在WKWebView加载完成时添加监听观察者
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
SVProgressHUD.dismiss()
//这个方法也可以计算出webView滚动视图滚动的高度
webView.evaluateJavaScript("document.body.scrollWidth") { (result, error) in
let webViewW = result as! CGFloat
let ratio = self.newsWebView.frame.width/webViewW
webView.evaluateJavaScript("document.body.scrollHeight", completionHandler: { (result, error) in
let newHeight = (result as! CGFloat) * ratio
self.resetWebViewFrameWidthHeight(height: newHeight)
if newHeight < kScreen_height {
//如果webView此时还不是满屏，就需要监听webView的变化 添加监听来动态监听内容视图的滚动区域大小
self.wbScrollView?.addObserver(self, forKeyPath: "contentSize", options: NSKeyValueObservingOptions.new, context: nil)
}
})
}
wbScrollView = self.newsWebView.scrollView
}
三、点击评论按钮实现直接显示评论列表
当猫猫听到这个需求的时候，猫猫是拒绝的，哎，但是却只能乖乖的去实现，猫猫尝试了各种方式，比如：偏移tableView，偏移webView，偏移webView的scrollView等等，最终实现的效果都不尽人意。最后猫猫想试一下直接重新设置webView的frame会怎样呢？先来看一下效果：
WKWebView.gif
其实实现的方法很简单，首先我们重置一下webView的frame，宽自然是屏幕的宽，高就是我们在加载完成时获取到的。然后使用了一下tableview的一个方法，跳转到指定的某一行（这里跳转的是第一组的第一行）
func chickCommentDetail() {
newsWebView.frame = CGRect(x: 0, y: 0, width: kScreen_width, height: webContentHeight ?? 0)
newsTableView.reloadData()
let oneIndex = IndexPath(row: 0, section: 0)
self.newsTableView.scrollToRow(at: oneIndex, at: .top, animated: true)
}
好啦O(∩_∩)O~，大功告成！