wkWebView有headerView和footerView并加在tableView的头部的方法及坑

每次发简书都是自己遇到的坑，填平后分享给大家，希望后来者可以少遇到些坑，
发代码前，首先很感谢二位简书的小伙伴给的帮助：

一、螃蟹(http://www.jianshu.com/u/82961c9b9e78) 提供的idea，在 webView的头部和底部分别加上一个view及KVO的思想；
二、杨Hrscy (http://www.jianshu.com/u/c0a496a1c168)提供的controller 导入xib的代码及帮助；

tableView的头部直接加 webView是很简单的，难点在于如何：

1、又在 tableView的tableHeaderView上的webView多加上一个顶部还有一个尾部view，因为webView的高度不确定性，加在webView底部的footerView要等计算出webView的实际高度后再加入
2、webView得用webView.scrollView.contentInset = UIEdgeInsetsMake(80, 0, 160, 0)偏移出相应的高度，并利用多出来的空间加上相应的headerView和footerView

以上这些问题详见代码，先见图然后看代码

webView1.png

webView2.png

webView3.png

webView4.png

webView8.png

webView9.png

webView10.png

上代码了！

//  HomeDetailController.swift
//  Created by Apiapia on 2017/9/30.
//  Copyright © 2017年 www.elinknet.cn All rights reserved.
//  view 作为 tableView 的 tableHeaderView，单纯的改变 view 的 frame 是无济于事的 tableView不会大度到时刻适应它的高度

import UIKit
import WebKit
import RxSwift
import RxCocoa
import MJRefresh
import SVProgressHUD
import Kingfisher
import IBAnimatable
import IQKeyboardManager

class WeiTouTiaoDetailController: UIViewController,WKUIDelegate,WKNavigationDelegate {
    
    fileprivate let disposeBag = DisposeBag()    // RX
    fileprivate var commentValue :Int = 0 // 评论数量
    fileprivate var content:String = ""
    @IBOutlet weak var tableView: UITableView!
    var comments = [NewsDetailImageComment]() // 评论列表
    var imgStr = ""
    var htmlString: String = ""
    var weitoutiao: WeiTouTiao? { //FIXME: user ,user_info,mediao_info 三种待统一
        didSet {
            if let content = weitoutiao!.content {
                self.content = content as String 
            }
            weitoutiao?.large_image_list.forEach({ (image) in
                imgStr += "<img src=\"\(String(describing: image.url!))\">"
            })
            commentValue = (weitoutiao?.comment_count)! // 评论数量
            if let user = weitoutiao!.user {
                navView.usernameLabel.text = user.name
                navView.avatarImageView.kf.setImage(with: URL(string: user.avatar_url!))
            } else if let userInfo = weitoutiao!.user_info {
                navView.usernameLabel.text = userInfo.name
                navView.avatarImageView.kf.setImage(with: URL(string: userInfo.avatar_url!))
            } else if let mediaInfo = weitoutiao!.media_info {
                navView.usernameLabel.text = mediaInfo.name
                navView.avatarImageView.kf.setImage(with: URL(string: mediaInfo.avatar_url!))
            }
            /// 设置headerView属性
            webViewHeaderView.weitoutiao = weitoutiao!
            /// 获取评论
            NetworkTool.loadNewsDetailComments(offset: 0, weitoutiao: weitoutiao!) { (comments) in
                self.comments = comments
                self.tableView.reloadData()
            }
        }
    }
    
    fileprivate lazy var navView: ConcernNavigationView = {
        let navView = ConcernNavigationView.concernNavView()
        navView.returnButton.setImage(UIImage(named: "leftbackicon_white_titlebar_24x24_"), for: .normal)
        navView.bottomLine.isHidden = false // 显示分割线
        navView.backgroundColor = UIColor.globalRedColor()
        navView.delegate = self
        navView.vipImageView.isHidden = false
        navView.avatarImageView.isHidden = false
        navView.usernameLabel.isHidden = false
        if let userVerified = self.weitoutiao!.user_verified {
            navView.vipImageView.isHidden = !userVerified
        }
        return navView
    }()
    /// 微头条详情页 头部
    fileprivate lazy var webViewHeaderView: NewsDetailHeaderView = {
        let headerView = NewsDetailHeaderView.headerView()
        headerView.frame = CGRect(x: 0, y: -80, width: screenWidth, height: 80)
        return headerView
    }()
    
    fileprivate lazy var webViewHeaderViewBak: UIView = {
        let headerView = UIView.init()
        headerView.frame = CGRect(x: 0, y: -80, width: screenWidth, height: 80)
        headerView.backgroundColor = UIColor.yellow
        return headerView
    }()
    
    fileprivate lazy var webViewFooterView:WebViewFooterView = {
        let footerView = WebViewFooterView.footerView()
        footerView.frame.size.height = 160
        return footerView
    }()
    
    fileprivate lazy var webViewFooterViewBak: UIView = {
        let footerView = UIView.init()
        footerView.frame.size.height = 160
        footerView.backgroundColor = UIColor.red
        return footerView
    }()
    
    fileprivate lazy var webView: WKWebView = {
        let webView = WKWebView.init()
        webView.frame = CGRect(x: 0, y: 0, width: screenWidth, height: screenHeight)
        webView.scrollView.contentInset = UIEdgeInsetsMake(80, 0, 160, 0)
        webView.uiDelegate = self
        webView.navigationDelegate = self
        webView.scrollView.isScrollEnabled = false // 设置不能滚动
        return webView
    }()
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        // 设置状态栏属性
        navigationController?.navigationBar.barStyle = .black
        navigationController?.setNavigationBarHidden(true, animated: animated)  // 导航条Hidden
        //navigationController?.setUpGlobalPan() // 开启全局手势
        setupUI()
    }
    
    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        navigationController?.setNavigationBarHidden(false, animated: animated)
        //navigationController?.removeGlobalPanGes() // 清除全局手势
    }
    override func viewDidLoad() {
        super.viewDidLoad()
        IQKeyboardManager.shared().isEnabled = false //MARK:- 这个库时不时会有小BUG...禁用
        htmlString  += "<html>"
        htmlString  += "<head>"
        htmlString  += "<meta name=\"viewport\" content=\"width=device-width,initial-scale=1,user-scalable=0\">"
        htmlString  += "<style>img{width:99%;margin:5;}body,html{margin:5;padding:5;border:0;}</style>"
        htmlString  += "</head>"
        htmlString  += "<body>"
        htmlString  += "\(self.content)<br>"
        htmlString  += "\(imgStr)"
        htmlString  += "</body>"
        htmlString  += "</html>"
        printLog(htmlString)
        webView.loadHTMLString(htmlString, baseURL: Bundle.main.bundleURL)
        //使用kvo为webView添加监听，监听webView的内容高度
        webView.scrollView.addObserver(self, forKeyPath: "contentSize", options: [.old,.new], context: nil)
        webView.scrollView.addSubview(webViewHeaderView)
        //webView.scrollView.addSubview(webViewFooterView) // 底部
        self.tableView.tableHeaderView = webView
        tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cell")
    }
    deinit {
        self.webView.scrollView.removeObserver(self, forKeyPath: "contentSize")
    }
    
}
//MARK: - 表格代理 ##################################
extension WeiTouTiaoDetailController: UITableViewDelegate, UITableViewDataSource {
    /// cell 的高度
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
//        let comment = comments[indexPath.row]
//        return comment.cellHeight!
        return 50 
        
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return   comments.count != 0 ? comments.count : 10
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        /*let comment = comments[indexPath.row]
        let cell = tableView.dequeueReusableCell(withIdentifier: String(describing: NewsDetailImageCommentCell.self), for: indexPath) as! NewsDetailImageCommentCell
        /// 判断评论是不是作者
        if let user = weitoutiao!.user {
            if comment.user_id! == user.user_id! {
                cell.isAuthor = true
            }
        } else if let userInfo = weitoutiao!.user_info {
            if comment.user_id! == userInfo.user_id! {
                cell.isAuthor = true
            }
        } else if let mediaInfo = weitoutiao!.media_info {
            if comment.user_id! == mediaInfo.user_id! {
                cell.isAuthor = true
            }
        }
        cell.comment = comments[indexPath.row]
        cellClickedEvent(cell: cell)
        */
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        cell.textLabel?.text = String(indexPath.row+1)
        return cell
    }
    /// 设置 present 出来的控制器
    private func setupPresentationController(cell: NewsDetailImageCommentCell) {
        let followDetailVC = FollowDetailViewController()
        followDetailVC.userid = cell.comment!.user_id!
        followDetailVC.dismissalAnimationType = .cover(from: .right)
        followDetailVC.presentationAnimationType = .cover(from: .right)
        followDetailVC.modalSize = (width: .full, height: .full)
        self.present(followDetailVC, animated: true, completion: nil)
    }
    
    /// cell 按钮点击事件
    private func cellClickedEvent(cell: NewsDetailImageCommentCell) {
        // 头像按钮点击
        cell.avatarButton.rx.controlEvent(.touchUpInside)
            .subscribe(onNext: { [weak self] in
                self!.setupPresentationController(cell: cell)
            })
            .addDisposableTo(disposeBag)
        // 用户名点击
        cell.nameLabel.rx.controlEvent(.touchUpInside)
            .subscribe(onNext: { [weak self] in
                self!.setupPresentationController(cell: cell)
            })
            .addDisposableTo(disposeBag)
        // 点击了 评论内容或者回复
        cell.coverReplayButton.rx.controlEvent(.touchUpInside)
            .subscribe(onNext: {
                
            })
            .addDisposableTo(disposeBag)
    }
}

extension WeiTouTiaoDetailController {
    
    func setupUI() {
        automaticallyAdjustsScrollViewInsets = false
        tableView.delegate = self
        tableView.dataSource = self
        view.addSubview(navView)
    }
}
//MARK: - webView代理 实时观察HTML的高度  ##############
extension WeiTouTiaoDetailController {
    
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        webView.evaluateJavaScript("document.body.offsetHeight;") { (result, error) in
            var frame:CGRect = webView.frame
            frame.size.height = result as! CGFloat
            frame.size.height += self.webViewHeaderView.frame.size.height //顶部
            frame.size.height += self.webViewFooterView.frame.size.height //底部
            webView.frame = frame
            self.webView.scrollView.addSubview(self.webViewFooterView) // 加载完毕后再加载
            self.webViewFooterView.frame =
                CGRect(x: 0,
                       y: webView.frame.maxY-self.webViewHeaderView.frame.size.height-self.webViewFooterView.frame.size.height,
                       width: screenWidth,
                       height: 160)
            self.tableView.tableHeaderView = webView
        }
        
    }
}

// MARK: - webView KVO 实时改变webView的控件高度，使其高度跟内容高度一致 
extension WeiTouTiaoDetailController {
    
    override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
        if (keyPath == "contentSize") {
// 加延迟以保证获得的高度包含偏移的部份
            DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + Double(Int64(0.1 * Double(NSEC_PER_SEC))) / Double(NSEC_PER_SEC), execute: {() -> Void in
                 var frame: CGRect = self.webView.frame
                 frame.size.height = self.webView.scrollView.contentSize.height //webView loadHtml加载后的内容高度
                 //self.webView.frame = CGRect(x: 0, y: 0, width: screenWidth, height: self.webView.scrollView.contentSize.height)
                 self.webView.frame = frame
                 self.tableView.tableHeaderView = self.webView
            })
            
        
        }
    }
}
// MARK: - 代理回调 Mine我的 / ConcernNavigationViewDelegate
extension WeiTouTiaoDetailController: ConcernNavigationViewDelegate {
    /// 返回按钮点击
    func concernHeaderViewReturnButtonClicked() {
        if (navigationController != nil) {
            navigationController?.popViewController(animated: true)
        } else {
            dismiss(animated: true, completion: nil)
        }
    }
    /// 更多按钮点击
    func concernHeaderViewMoreButtonClicked() {
        
        let userVC = FollowDetailViewController()
        if let user = weitoutiao?.user {
            userVC.userid = user.user_id!
        } else if let user_info = weitoutiao?.user_info {
            userVC.userid = user_info.user_id!
        }
        navigationController?.pushViewController(userVC, animated: true)
    }
    func concernHeaderUsernameButtonClicked() {
        
        let userVC = FollowDetailViewController()
        if let user = weitoutiao?.user {
            userVC.userid = user.user_id!
        } else if let user_info = weitoutiao?.user_info {
            userVC.userid = user_info.user_id!
        }
        navigationController?.pushViewController(userVC, animated: true)
        
    }
}

//MARK: -  修改状态条颜色 没有导航条的情况下 会执行 否则执行 navBar.barStyle = .black
extension WeiTouTiaoDetailController {
    override var preferredStatusBarStyle: UIStatusBarStyle {
        return .lightContent
    }
}

哈，就这些了，网上确实有很多针对webView如何加view这个的问题，但总觉得太过于分散，而且有的给的代码存在有不少的坑，觉得自己很有必要把填平完的坑分享给后来者，希望大家喜欢！

还有自己代码水平有限，希望大家多多见谅，再次感谢您浏览！

最后编辑于：2017.12.10 21:26:18

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 194,911评论 5赞 460
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 82,014评论 2赞 371
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 142,129评论 0赞 320
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 52,283评论 1赞 264
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 61,159评论 4赞 357
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 46,161评论 1赞 272
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 36,565评论 3赞 382
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 35,251评论 0赞 253
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 39,531评论 1赞 292
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 34,619评论 2赞 310
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 36,383评论 1赞 326
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,255评论 3赞 313
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 37,624评论 3赞 299
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 28,916评论 0赞 17
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,199评论 1赞 250
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 41,553评论 2赞 342
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 40,756评论 2赞 335

wkWebView有headerView和footerView并加在tableView的头部的方法及坑

推荐阅读更多精彩内容