Swift3.0~WKWebView作为UITableView的

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~，大功告成！