iOS【终极方案】精准获取webView内容高度，自适应高度

快来打我* 2023-10-17 17:27 63阅读 0赞

关于WebView内容高度的获取，相信很多人都踩过坑，无法获取到准确高度，导致页面布局出现差错，搜到的资料很多但都无法解决问题，以下是个人经验总结：  
项目需求实现H5文章&原生评论效果，文章是加载H5链接，评论信息是后台接口提供，以列表形式展示。  
实现思路：  
1. webView加载H5链接，设置它为tableView的 headerView，下方评论信息用Cell加载展示。  
2. 在webView的回调方法webViewDidFinishLoad中获取网页内容高度，设置为webView的高度，重新将webView赋给tableView的headerView。

Tip: 将一个View赋值给UITableView的tableHeaderView时，不需要手动设置高度，HeaderView会自动使用View的高度。

![Center][]

像上面这样，类似的方法很多，无论是JS获取，还是contentSize获取，最后结果都难以获取到准确高度，并非方法不行，而是：  
webViewDidFinishLoad代理方法被调用时，页面并不一定完全展现完成，可能有图片还未加载出来，导致此时获取的高度是并不是最终高度，过会儿图片加载出来后，浏览器会重新排版，而我们在这之前给了一个错误高度，导致显示异常。  
问题原因已确定，解决思考：  
如何能在webViewDidFinishLoad之后获取到网页内容高度的变化？  
答案：监听！  
具体实现过程：

给webView的scrollView的contentSize属性添加监听，每当内容发生变化，contentSize一定会跟着变，捕获这个变动，在监听方法中实现webViewDidFinishLoad中的代码，也就是获取最新的内容高度赋给webView：

![Center 1][]

另外，在cell中使用webView获取高度不准确的解决办法跟上面一样，只不过需要注意cell中使用webView涉及到cell重用，会导致滑动列表时webView多次加载，影响性能，建议缓存高度。  
注意：  
如果不走监听，要先怀疑自己，不要怀疑我！  
1. 确保webview已经加在页面上了，并且能够正常显示，然后再继续获取内容高度，如果都显示不了，别来找我！  
2. 是给webview的scrollview添加监听，不要加在webview上，否则累死你也不会走监听方法！  
3. 如果你用的是swift，那请先看这篇文章：Swift中KVO（监听）的使用方法及注意事项  
若上述方式解决不了你的问题，请尝试另一方案： [ iOS 【奇巧淫技】获取webView内容高度][iOS _webView]  
  
作者：臭码农  
链接：http://www.jianshu.com/p/6bbcc438b188  
來源：简书  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[Center]: https://img-blog.csdn.net/20171213171127086?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTWluZ2dlUWluZ2NodW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: https://img-blog.csdn.net/20171213171148901?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTWluZ2dlUWluZ2NodW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[iOS _webView]: http://blog.csdn.net/minggeqingchun/article/details/78794152