背景
因项目需要，需要在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
