原生页面嵌入UIWebView的高度计算问题

图片1

图片2

如上两张图片所示，红色线框内的内容为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方法计算高度。