Hello，好久不見啦，今天給大家分享一下WKWebView的使用，先看看效果吧

WKWebView.gif

一、WKWebView和UIWebView的簡單介紹

如果大家對UIWebView和WKWebView還不是很了解，大家可以參考一下這篇：【iOS開發(fā)】從 UIWebView 到 WKWebView

二、動(dòng)態(tài)監(jiān)聽WKWebView的高度

首先，我們來創(chuàng)建一個(gè)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
}()

實(shí)現(xiàn)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()
}

監(jiān)聽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
    }
}
// 監(jiān)聽
override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
    // 根據(jù)內(nèi)容的高度重置webview視圖的高度
    let newHeight = wbScrollView?.contentSize.height
    resetWebViewFrameWidthHeight(height: newHeight!)
}

在WKWebView加載完成時(shí)添加監(jiān)聽觀察者

 func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    SVProgressHUD.dismiss()
    
    //這個(gè)方法也可以計(jì)算出webView滾動(dòng)視圖滾動(dòng)的高度
    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此時(shí)還不是滿屏，就需要監(jiān)聽webView的變化  添加監(jiān)聽來動(dòng)態(tài)監(jiān)聽內(nèi)容視圖的滾動(dòng)區(qū)域大小
                self.wbScrollView?.addObserver(self, forKeyPath: "contentSize", options: NSKeyValueObservingOptions.new, context: nil)
            }
        })
    }
    wbScrollView = self.newsWebView.scrollView
}

三、點(diǎn)擊評論按鈕實(shí)現(xiàn)直接顯示評論列表

當(dāng)貓貓聽到這個(gè)需求的時(shí)候，貓貓是拒絕的，哎，但是卻只能乖乖的去實(shí)現(xiàn)，貓貓嘗試了各種方式，比如：偏移tableView，偏移webView，偏移webView的scrollView等等，最終實(shí)現(xiàn)的效果都不盡人意。最后貓貓想試一下直接重新設(shè)置webView的frame會(huì)怎樣呢？先來看一下效果：

WKWebView.gif

其實(shí)實(shí)現(xiàn)的方法很簡單，首先我們重置一下webView的frame，寬自然是屏幕的寬，高就是我們在加載完成時(shí)獲取到的。然后使用了一下tableview的一個(gè)方法，跳轉(zhuǎn)到指定的某一行（這里跳轉(zhuǎn)的是第一組的第一行）

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