不论是UIWebView还是WKWebView,在tableViewCell中嵌套使用时都有可能出现问题,比如通过JS获取的H5页面内容高度和H5显示的实际高度不一样,有时候高有时候低有时候又正常,让人抓狂。
本人在做H5图片懒加载时意识到问题可能出现在懒加载这里,因为图片没有下载好之前都是显示占位图片,而占位图片的高度是固定的(原图的高度可能不固定),有可能比原图高,有可能比原图窄,也可能一样高,一样高不会出现什么问题,前两种就会造成网页显示异常。
第一种情况:占位图片的高度和原来图片的高度一样,那么不会有问题
第二种情况:占位图片的高度比原来图片的高度小,那么此时JS获取到的高度会比实际高度要小,等图片下载完后页面就会被撑高,导致H5页面显示不全
第三种情况:占位图片的高度比原来图片的高度大,那么此时JS获取到的高度会比实际高度要大,等图片下载完后页面就会变短,导致webView留出一段空白
解决办法:使用KVO监听webView.scrollView的contentSize属性
//添加观察者
[wself.webview.scrollView addObserver:wself forKeyPath:@"contentSize"
options:NSKeyValueObservingOptionNew context:nil];
图片下载好以后,contentSize属性会变化,也就是页面的实际高度会变化,这个时候使用最新的高度刷新cell的高度
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object
change:(NSDictionary *)change
context:(void *)context{
//由于图片在实时加载,监听到内容高度变化,需要实时刷新您的控件展示高度
if([keyPath isEqualToString:@"contentSize"]) {
//直接使用scrollView.contentSize.height来刷新cell高度,不再使用JS获取
CGFloat height = self.webview.scrollView.contentSize.height;
//定义一个属性保存高度,当上一次的高度等于这次的高度时就不要刷新cell了,不然cell会一直刷新
if (self.contentHeight == height) {
return ;
}
self.model.contentHeight = height;
//刷新cell高度
...
}
}
刷新cell时去除动画,否则tableview会上下跳动
[UIView performWithoutAnimation:^{
[self.tableview reloadRowsAtIndexPaths: withRowAnimation:UITableViewRowAnimationNone];
}];
最后记得移除KVO监听
[self.webview.scrollView removeObserver:self forKeyPath:@"contentSize"];