swift-UITableView与WKWebView混合使用

tableHeaderView

import UIKit
import WebKit

class CLTableWebHeaderView: UIView {

    // wkWebView
    lazy private var myWkWebView = WKWebView()

    // 进度条
    lazy private var myProgressView = UIProgressView()

    // 头部视图
    private var myTopView: UIView?

    init(frame:CGRect, url:String, topView:UIView?) {
        super.init(frame: frame)
        myWkWebView.navigationDelegate = self
        myWkWebView.scrollView.showsVerticalScrollIndicator = false
        myWkWebView.scrollView.showsHorizontalScrollIndicator = false
        myWkWebView.scrollView.isScrollEnabled = false
        myWkWebView.frame = self.bounds
        myWkWebView.addObserver(self, forKeyPath:"estimatedProgress", options: .new, context:nil)
        self.addSubview(myWkWebView)
        myProgressView.frame=CGRect.init(x:0, y:0, width:self.frame.width, height:2)
        myProgressView.progressTintColor = UIColor.green
        myProgressView.trackTintColor = UIColor.clear
        self.addSubview(myProgressView)
        self.addTopView(topView: topView)
        self.loadUrl(url: url)
    }

    required init?(coder:NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    ///加载url
    /// - Parameter url: url地址
    public func loadUrl(url:String) {
        guard let u = URL.init(string: url)else{return}
        myWkWebView.load(URLRequest.init(url: u))
    }



    /// 在web上面添加一个头部视图
    /// - Parameter headerView: 头部视图
    public func addTopView(topView:UIView?) {
        myTopView?.removeFromSuperview()
        myTopView = topView;
        guard let hv = topView else{
            myWkWebView.scrollView.contentInset = UIEdgeInsets.init(top:0, left:0, bottom:0, right:0)
            return
        }
        let h = hv.frame.height
        hv.frame.origin = CGPoint.init(x:0, y: -h)
        myWkWebView.scrollView.contentInset = UIEdgeInsets.init(top: h, left:0, bottom:0, right:0)
        myWkWebView.scrollView.addSubview(hv)
        myWkWebView.scrollView.bringSubviewToFront(hv)
        myWkWebView.scrollView.setContentOffset(CGPoint.init(x:0, y: -h), animated:false)
    }



    deinit{
        myWkWebView.removeObserver(self, forKeyPath:"estimatedProgress")
        myWkWebView.uiDelegate = nil
        myWkWebView.navigationDelegate = nil
        #ifDEBUG
        NSLog("%@", "CLTableWebHeaderView释放了...........")
        #endif
    }

}

// MARK: - WKNavigationDelegate
extension CLTableWebHeaderView: WKNavigationDelegate {
    // 监听网页加载进度
    override func observeValue(forKeyPath keyPath:String?, of object:Any?, change: [NSKeyValueChangeKey:Any]?, context:UnsafeMutableRawPointer?) {
        myProgressView.progress = Float(self.myWkWebView.estimatedProgress)
    }

    // 页面开始加载时调用
    func webView(_webView:WKWebView, didStartProvisionalNavigation navigation:WKNavigation!) {

    }

    // 当内容开始返回时调用
    func webView(_webView:WKWebView, didCommit navigation:WKNavigation!){

    }

    // 页面加载完成之后调用
    func webView(_webView:WKWebView, didFinish navigation:WKNavigation!){
        UIView.animate(withDuration:0.5) {
            self.myProgressView.isHidden = true
        }
        var f = self.frame
        f.size.height = myWkWebView.scrollView.contentSize.height + (myTopView?.frame.height ?? 0)
        self.frame = f
        myWkWebView.frame.size.height = f.size.height
        guard let tb = self.superview as? UITableView else{
            return
        }
        tb.beginUpdates()
        tb.endUpdates()
    }

    // 页面加载失败时调用
    func webView(_webView:WKWebView, didFail navigation:WKNavigation!, withError error:Error){

    }

}

使用示例

importUIKit

class CLTableWebHeaderTestController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    @IBOutlet weak var myTable: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()
        self.title ="测试";
        myTable.delegate = self;
        myTable.dataSource = self;
        // 创建一个顶部视图
        let topView = UIView.init(frame:CGRect.init(x:0, y:0, width:ScreenWidth, height:100))
        topView.backgroundColor = UIColor.blue
        //  创建CLTableWebHeaderView
        let hv = CLTableWebHeaderView.init(frame:self.view.bounds, url:"https://www.jianshu.com/p/e41e116837b5", topView: topView)
        myTable.tableHeaderView = hv
    }

    func tableView(_tableView:UITableView, numberOfRowsInSection section:Int) ->Int{
        return13
    }

    func tableView(_tableView:UITableView, cellForRowAt indexPath:IndexPath) ->UITableViewCell{
        var cell = tableView.dequeueReusableCell(withIdentifier:"CLTableWebHeaderTestCell")
        if cell == nil{
            cell = UITableViewCell.init(style: .default, reuseIdentifier:"CLTableWebHeaderTestCell")
        }
        cell!.textLabel?.text = "序号：\(indexPath.row)"
        return cell!
    }

    func tableView(_tableView:UITableView, heightForRowAt indexPath:IndexPath) ->CGFloat{
        return 44
    }

}