iOS中webView嵌套tableView中动态高度问题

前言

在开发中，我们可能遇到html网页的展示需求，为了让展现内容灵活多变，故很多新闻类的应用都是采用html+本地原生界面进行展示开发的。从获取html源码开始说起吧！在拿到html源码的时候，我们第一步要将这些网页内容展示到webView上面，显然，这一步很简单。如果整个页面单纯的是一个网页的话，基本就完工了，就是纯网页展示嘛！但是如果是webView嵌入到原生的页面中，比如将webView嵌入到tableView中，就会遇到一些问题。最不好解决的问题可能就是webView的高度问题了。

方案

webView这个控件大家估计都知道，它是有内容高度的，就是contentSize，如果内容高度比控件的高度大的话，那么滚动的时候就是整个webView在滚动，而外层的tablView你会发现似乎没法接收当前的滚动手势。这样其实造成了一个问题，就是本来要浏览tableView所要展示的内容，而结果却成了滚动webView了，是不是很奇怪，这样会影响用户体验。

其实，解决的方法也很简单，只要将webView的contentSize的高度设置为webView的控件高度就可以了。这样就不会出现webView的内容滚动问题了。关键是如何设置这个内容高度，什么时候设置它比较合适。

其实我尝试了很多种方案，比如在webView的代理回调中去实现高度的更新，但是代理中，只有一个webView内容全部加载完成以后的回调方法，如果在这个时候更新的话，会有很明显的跳跃效果，真的是很痛苦。因为网页的内容是实时变化的，如果在网页加载到最后的时候，在去更新它的高度，这个跳跃会更明显。而我们所需要的其实就是实时更新网页内容的高度，只有这样才能做到像浏览网页一样浏览tablView中的webView。所以为了解决这个问题，我用了kvo，使用kvo监听网页内容的高度，如果高度发生变化，就去更新webView的控件高度，这样就做到了实时性，让网页的高度与网页内容的高度始终保持一致，这样其实就达到了我们期待的效果。

实现

就说说实现吧！代码奉上，哈哈~

- (void)creatView{

    self.webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 300)];
    [self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]]];
    
    //使用kvo为webView添加监听，监听webView的内容高度
    [self.webView.scrollView addObserver:self forKeyPath:@"contentSize" options:NSKeyValueObservingOptionOld | NSKeyValueObservingOptionNew context:nil];
    
    self.tableView = [[UITableView alloc]initWithFrame:self.view.frame style:UITableViewStyleGrouped];
    self.tableView.backgroundColor = [UIColor whiteColor];
    self.tableView.delegate = self;
    self.tableView.dataSource = self;
    self.tableView.rowHeight = 80;
    
    //设置webView为tableView的header
    self.tableView.tableHeaderView = self.webView;
    
    [self.view addSubview:self.tableView];
    
    
    

}

//实时改变webView的控件高度，使其高度跟内容高度一致
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context{

    if ([keyPath isEqualToString:@"contentSize"]) {
        CGRect frame = self.webView.frame;
        frame.size.height = self.webView.scrollView.contentSize.height;
        self.webView.frame = frame;
        
        self.tableView.tableHeaderView = self.webView;
    }
}

- (void)dealloc{

    //销毁的时候别忘移除监听
    [self.webView.scrollView removeObserver:self forKeyPath:@"contentSize"];
}

#pragma -mark- tableView的代理方法
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{

    return 20;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    
    static NSString *cellID = @"reuseCell";
    
    UITableViewCell *tableViewCell = [tableView dequeueReusableCellWithIdentifier:cellID];
    
    if (tableViewCell == nil) {
        tableViewCell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellID];
    }
    
    
    tableViewCell.textLabel.text = [NSString stringWithFormat:@"%ld",indexPath.row];
    
    return tableViewCell;

    
}

对应的效果如下：

例子

点我看 Demo