如上两张图片所示,红色线框内的内容为H5内容,其余上下均为原生。图片1考虑在UITableViewCell中嵌入UIWebView,图片2考虑作为下边的列表的头部视图,也就是作为TableHeaderView。
不管是第一种情况,还是第二种情况都需要确定H5内容的高度。从网上了解了几种做法,可以参考如下链接: iOS计算UIWebView的高度和iOS8之后的WKWebView的高度问题 完美方案——iOS的WebView自适应内容高度
以上这几种方案或多或少都能解决一定场景下的高度计算,但是都会有些问题:1.通过给H5的内容content最外层包一层标签加载,这时候会有两个大的问题:其一,很难保证H5的所有样式都能对应到content中;其二,加过标签后的H5内容会被默认再包一层document标签,还有就是加最外层的标签不能保证对原始标签显示没有影响,这样就很难保证大部分H5展示没问题。2.通过调用JS方法,获取高度,例如:document.body.offsetHeight, document.body.clientHeight,document.body.scrollHeight。但是这种获取方式很容易受到H5内容的不同,样式的不同而不能准确地拿到高度,包括利用NJKWebViewProgress。
后来经过多次测试,发现比较完美的方案:动态获取UIWebView高度
使用步骤:
1.监听了 webView的 contentSize。
[webView.scrollView addObserver:self forKeyPath:@"contentSize" options:NSKeyValueObservingOptionNew context:nil];
2.在回调方法里做更新UI操作。
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context {
if ([keyPath isEqualToString:@"contentSize"]) { // UI更新操作,比如webView高度更新
CGFloat height = self.headerView.contentWebView.scrollView.contentSize.height;
if (self.webViewHeight && self.webViewHeight == height) return;
self.webViewHeight = height;
}}
3.在页面消失时记得 remove 监听对象。在viewWillDisappear还是dealloc方法做根据情况而定。
[webView.scrollView removeObserver:self
forKeyPath:@"contentSize" context:nil];
注意:以上方案会频繁更改webView高度,当H5内容高多时会很大几率闪退,因为内存溢出。UIWebView改为WKWebView,性能大幅度提升,也不会有内存问题。关于两者的区别可以参考:UIWebView与WKWebView实战详解,这里简单介绍一下我在项目中使用的功能:H5图片点击预览,H5内容链接点击拦截。
下面进行简单说明:
1. 封装方法获取H5内容中的所有图片标签。
2.在WKWebView加载完成时,给匹配到的图片标签加点击事件。
3.拦截点击,处理url。
使用定时器,当高度拿到时给控制器发通知。问题解决!!!
总结:使用UIWebView或则WKWeView加载H5页面,需要算高度时,建议使用监听webView中scrollView的contengSize方法计算高度。