最近項目中遇到了一個需求，TableView中需要嵌套Web頁面严肪，我的解決辦法是在系統(tǒng)的UITableViewCell中添加WKWebView。開發(fā)的過程中谦屑，遇到了些坑驳糯，寫出來分享一下。
1.首先說一下WKWebView的代理方法中氢橙，頁面加載完成后會走的代理方法酝枢，與UIWebView的頁面加載完成代理方法一樣。
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation
- (void)webViewDidFinishLoad:(UIWebView *)webView;
這兩個方法都是在web頁面加載完成后才會走的代理方法悍手。什么才算是加載完成呢帘睦？web頁面中的所有元素都加載成功，包括圖片坦康、音頻和視頻等資源竣付，都加載成功了，才算加載完成滞欠。如果通過這兩個代理方法來計算cell的高度古胆，你的整個tableview頁面就會加載得很慢，至少要等web頁面加載完成后才能計算高度重鋪tableview筛璧。
2.WKWebView加載完成展示頁面的時候逸绎，會讓整個web頁面自動適應(yīng)屏幕的寬度。這樣展示出來的效果就會很緊湊夭谤，頁面內(nèi)容會很小棺牧。
為了讓web頁面中的元素都適應(yīng)屏幕的寬度顯示，需要對WKWebView進行一下設(shè)置沮翔，原理是加載js代碼陨帆，然后通過js來設(shè)置webview中的元素大星：
WKWebViewConfiguration *webConfig = [[WKWebViewConfiguration alloc] init];
WKUserContentController *wkController = [[WKUserContentController alloc] init];
webConfig.userContentController = wkController;
// 自適應(yīng)屏幕寬度js
NSString *jsStr = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";
WKUserScript *wkScript = [[WKUserScript alloc] initWithSource:jsStr injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
// 添加js調(diào)用
[wkUController addUserScript:wkScript];
WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.frame configuration:webConfig];
如果加載的是HTML代碼，圖片的自適應(yīng)可以通過下面一段CSS代碼來設(shè)置：
NSString *html = @"HTML代碼";
NSString *cssStr = @"<style type=\"text/css\">p{line-height: 24px!important;background-color: #fff;}img{max-width: 100%!important;}</style>";
NSString *htmlStr = [NSString stringWithFormat:@"<!DOCTYPE html><html><head><title>webview</title></head><body>%@%@</body></html>", cssStr, html];
[webView loadHTMLString:htmlStr baseURL:nil];
3.接下來說說重頭戲疲牵，UITableViewCell嵌套WKWebView承二。
（1）cell的高度自適應(yīng)（筆者用的是系統(tǒng)的cell，UITableViewCell）
cell的高度當然是根據(jù)webview的高度來設(shè)置的纲爸，所以首先要算出webview頁面的高度亥鸠。開篇就已經(jīng)說過，webview加載完成的代理方法是web頁面中的所有元素都加載成功识啦，包括圖片负蚊、音頻和視頻等資源，都加載成功了颓哮，才算加載完成家妆。如果頁面中的元素過多，網(wǎng)絡(luò)圖片過大冕茅，視頻過大等伤极，就會導(dǎo)致web頁面加載卡頓。本身WKWebView這些資源是異步加載的姨伤，但是計算cell高度的時候是在這些資源都加載完成后才計算高度哨坪，WKWebView也就失去的異步加載的意義，所以整個tableview都會加載得很慢乍楚。
明白了這個道理当编，我個人推薦使用KVO來代替webview的代理方法。
// 對webView中的scrollView設(shè)置KVO
[_webView.scrollView addObserver:self forKeyPath:@"contentSize" options:NSKeyValueObservingOptionNew context:nil];
// KVO具體實現(xiàn)
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context
{
if ([keyPath isEqualToString:@"contentSize"]) {
// 這里有兩種方法獲得webview高度徒溪，第一種就是通過JS代碼來計算出高度忿偷，如下
// document.documentElement.scrollHeight
// document.body.offsetHeight
/*
[_webView evaluateJavaScript:@"document.body.offsetHeight" completionHandler:^(id _Nullable result, NSError * _Nullable error) {
// 加20像素是為了預(yù)留出邊緣，這里可以隨意
CGFloat height = [result doubleValue] + 20;
// 設(shè)置一個高度屬性臊泌，賦值后便于設(shè)置cell的高度
_webHeight = height;
// 設(shè)置cell上子視圖的frame牵舱，主要是高度
_webView.frame = CGRectMake(0, 0, kScreenWidth, height);
_scrollView.frame = CGRectMake(0, 0, kScreenWidth, height);
_scrollView.contentSize =CGSizeMake(kScreenWidth, height);
// 獲取了高度之后，要更新webview所在的cell缺虐，其他的cell就不用更新了，這樣能更節(jié)省資源
[self.tableView reloadRowsAtIndexPaths:[NSArray arrayWithObjects:[NSIndexPath indexPathForRow:1 inSection:0], nil] withRowAnimation:UITableViewRowAnimationNone];
}];
*/
// 第二種方法就是直接使用監(jiān)聽的contentSize.height（這里要感謝[markss](http://www.reibang.com/u/cc0bd919cb50)簡友的評論提醒）礁凡，但是與第一種方法不同的就是不能再加多余的高度了高氮，那樣會循環(huán)出發(fā)KVO，不斷的增加高度直到crash顷牌。
UIScrollView *scrollView = (UIScrollView *)object;
CGFloat height = scrollView.contentSize.height;
_webHeight = height;
_webView.frame = CGRectMake(0, 0, kScreenWidth, height);
_scrollView.frame = CGRectMake(0, 0, kScreenWidth, height);
_scrollView.contentSize =CGSizeMake(kScreenWidth, height);
[self.tableView reloadRowsAtIndexPaths:[NSArray arrayWithObjects:[NSIndexPath indexPathForRow:1 inSection:0], nil] withRowAnimation:UITableViewRowAnimationNone];
}
}
// 別忘注銷kvo
- (void)dealloc
{
[_webView.scrollView removeObserver:self forKeyPath:@"contentSize"];
}
這樣設(shè)置后的webView直接addSubview到webCell.contentView上剪芍，頁面是加載出來了，但是webView的高度并不能改變窟蓝。
（2）然后筆者百度了一下罪裹，找到了一個方法。就是先將webView addSubview到一個scrollView上
[_scrollView addSubview:_webView];
然后再將這個scrollView addSubview到webCell.contentView上
[webCell.contentView addSubview:_scrollView];
這樣webview的高度就可以改變了。但是這是什么原理状共，筆者還沒搞清楚套耕，希望懂的大神能給予熱情而細心的指導(dǎo)。
（3）在刷新tableview刷新cell的時候峡继，會重新走一遍所有的tableview代理方法冯袍，所以筆者建議盡量優(yōu)化- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath中的代碼，防止多次加載webview
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
switch (indexPath.row) {
case 0:
{
ArticleHeaderTableViewCell *articleHeaderCell = [tableView dequeueReusableCellWithIdentifier:_articleHeaderIdentifier forIndexPath:indexPath];
return articleHeaderCell;
}
break;
case 1:
{
// 嵌套webivew的cell
UITableViewCell *webCell = [tableView dequeueReusableCellWithIdentifier:_articleWebIdentifier forIndexPath:indexPath];
[webCell.contentView addSubview:_scrollView];
return webCell;
}
break;
case 2:
{
ArticleCommentTableViewCell *articleCommentCell = [tableView dequeueReusableCellWithIdentifier:_articleCommentIdentifier forIndexPath:indexPath];
return articleCommentCell;
}
break;
default:
{
CommentsTableViewCell *commentsCell = [tableView dequeueReusableCellWithIdentifier:_commentsIdentifier forIndexPath:indexPath];
return commentsCell;
}
break;
}
}
總結(jié)：
1.在cell上嵌套webview之前碾牌，一定要在中間多加一層scrollview康愤。
2.在計算cell高度的時候，不建議直接使用系統(tǒng)webview的代理方法舶吗，建議使用kvo征冷。
3.進行減少- (UITableViewCell )tableView:(UITableView )tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath方法中對webview的操作，這樣能減少webview的重復(fù)加載誓琼，提高性能和速度检激。
ps：每個人都有自己的想法，每個人的優(yōu)化方式不同踊赠，筆者也是在摸索中嘗試著呵扛，如果有說得不對不準確的地方，還請各位指正出來筐带，大家共同探討今穿，互相學習。
