更新

2018年05月22日

陆续有用户反映有一些文章无法查看。调试（XCode9.3 (9E145)）发现：在浏览多图文章时报以下问题：

  1. 报内存不足问题。

下面是修改内容：

  1. 删除以前的方法，WKWebView直接添加到cell的contentView里面
//	[self.contentScrollView addSubview:self.webView];
//	[self.contentView addSubview:self.contentScrollView];
	[self.contentView addSubview:self.webView];
复制代码
  1. 更新高度方法修改，使用此方法可以只修改cell高度
[self beginUpdates];
    [self endUpdates];
复制代码


背景

因项目需要，需要在UITableView中加入HTML与评论功能。下面作为此次爬坑的一次记录。):

总结
  • UITableView与WKWebView的结合与适配，关键在于要先将WKWebView装进UIScrollview后再放进UITableViewCell里面去。
  • 获取WKWebView的正确高度，放到网页加载完成的代理方法里面，使用js获取。
初始化
#import <WebKit/WebKit.h>
#define kScreenW [UIScreen mainScreen].bounds.size.width
#define kScreenH [UIScreen mainScreen].bounds.size.height
static CGFloat MARGIN = 24;

@property(strong, nonatomic)UIScrollView *contentScrollView;
@property(strong, nonatomic)WKWebView *wkWebView;

-(WKWebView *)wkWebView{
	if (!_wkWebView) {
		WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc]init];
		config.allowsInlineMediaPlayback = YES;//使用H5播放视频
		_wkWebView = [[WKWebView alloc]initWithFrame:CGRectMake(0, 0, kScreenW, 0) configuration:config];
		_wkWebView.navigationDelegate=self;
		_wkWebView.scrollView.scrollEnabled=NO;//禁止滚动，防止与UITableView冲突
	}
	return _wkWebView;
}

-(UIScrollView *)contentScrollView{
	if (!_contentScrollView) {
		_contentScrollView = [[UIScrollView alloc]init];
		_contentScrollView.contentSize=CGSizeMake(kScreenW, kScreenH);
		_contentScrollView.scrollEnabled=NO;//禁止滚动，防止与UITableView冲突
	}
	return _contentScrollView;
}

/**
 初始化WKWebView
 */
-(void)initWebView{
	[self.view addSubview:self.wkWebView];//需要先将WKWebView加入到view中
	NSString *urlString =@"测试地址";
	NSURLRequest *urlRequest = [[NSURLRequest alloc]initWithURL:[NSURL URLWithString:urlString] ;
	[self.wkWebView loadRequest:urlRequest];
}

复制代码
WKWebView放进UITableViewCell的正确打开方式
解决：WKWebView无法显示完全问题

先将WKWebView放进UIScrollview，再把Scrollview放进Cell。

/**
 WKWebView cell
 @return cell
 */
-(UITableViewCell *)wkWebViewCell{
	
	UITableViewCell *cell = [[UITableViewCell alloc]init];
	cell.selectionStyle=UITableViewCellSelectionStyleNone;
	//解决WKWebView无法显示完全问题。先添加到scrollview
	self.contentScrollView.frame = self.wkWebView.bounds;
	[self.contentScrollView addSubview:self.wkWebView];
	
	[cell.contentView addSubview:self.contentScrollView];
	return cell;
}
复制代码
如何正确获取WKWebView高度
实现WKNavigationDelegate代理方法以获取HTML高度
-(void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{
	//获取网页正文全文高，刷新cell
	[webView evaluateJavaScript:@"document.body.scrollHeight" completionHandler:^(id _Nullable result, NSError * _Nullable error) {
		self.wkWebView.frame=CGRectMake(0, MARGIN, self.view.width, [result doubleValue]+ MARGIN);//将WKWebView的高度设置为内容高度
		//刷新制定位置Cell
		[self refreshWebViewCell];
	}];
}
复制代码
刷新Cell高度
-(void)refreshWebViewCell{
	[self.myTableView reloadRowsAtIndexPaths:@[[NSIndexPath indexPathForRow:1 inSection:0]] withRowAnimation:UITableViewRowAnimationNone];//刷新制定位置Cell
}
复制代码

cell高度返回WKWebView的高度即可。

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
return self.wkWebView.heigth;
}
复制代码
记录一个情况

就是WKWebView初始化的时候，高度随便设置为一个非零的数字时，在js获取高度时会不准。

HTML附加内容

网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线的高) 网页正文全文宽： document.body.scrollWidth 网页正文全文高： document.body.scrollHeight 网页被卷去的高： document.body.scrollTop 网页被卷去的左： document.body.scrollLeft 网页正文部分上： window.screenTop 网页正文部分左： window.screenLeft 屏幕分辨率的高： window.screen.height 屏幕分辨率的宽： window.screen.width 屏幕可用工作区高度： window.screen.availHeight 屏幕可用工作区宽度： window.screen.availWidth