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