iOS-tableview【终极方案】精准获取webView内容高度,自适应高度
关于WebView内容高度的获取,相信很多人都踩过坑,无法获取到准确高度,导致页面布局出现差错,搜到的资料很多但都无法解决问题,以下是个人经验总结:
项目需求实现H5文章&原生评论效果,文章是加载H5链接,评论信息是后台接口提供,以列表形式展示。
实现思路:
1. webView加载H5链接,设置它为tableView的 headerView,下方评论信息用Cell加载展示。
2. 在webView的回调方法webViewDidFinishLoad中获取网页内容高度,设置为webView的高度,重新将webView赋给tableView的headerView。
Tip: 将一个View赋值给UITableView的tableHeaderView时,不需要手动设置高度,HeaderView会自动使用View的高度。

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

另外,在cell中使用webView获取高度不准确的解决办法跟上面一样,只不过需要注意cell中使用webView涉及到cell重用,会导致滑动列表时webView多次加载,影响性能,建议缓存高度。
注意:
如果不走监听,要先怀疑自己,不要怀疑我!
1. 确保webview已经加在页面上了,并且能够正常显示,然后再继续获取内容高度,如果都显示不了,别来找我!
2. 是给webview的scrollview添加监听,不要加在webview上,否则累死你也不会走监听方法!
3. 如果你用的是swift,那请先看这篇文章:Swift中KVO(监听)的使用方法及注意事项
iOS-tableview【终极方案】精准获取webView内容高度,自适应高度的更多相关文章
- iOS 【终极方案】精准获取webView内容高度,自适应高度
前言:是这样的,刚写完上一篇文章还没缓过神来,上一篇文章我还提到了,想和大家聊聊原生+H5如何无缝连接的故事.结果我朋友就给我发了两篇他的作品.他的做法也都有独到之处.好的文章都是这样,让你每次看都能 ...
- iOS【野路子】精准获取webView内容高度,自适应高度
关于WebView内容高度的获取,相信很多人都踩过坑,无法获取到准确高度,导致页面布局出现差错,搜到的资料很多但都无法解决问题,以下是个人经验总结: 项目需求实现H5文章&原生评论效果,文章是 ...
- android 获取webview内容真实高度(webview上下可滚动距离)
正常获取: mainWebView.getContentHeight()//获取html高度 mainWebView.getScale()//手机上网页缩放比例 mainWebView.getHeig ...
- appium不能获取webview内容的解决办法
在用appium对小猿搜题app进行自动化测试时,准备用page_source打印出文章的xml内容 但是发现只能打印出外部结构内容,实际的文章内容却没有显示 截图如下 查询之后,得知需要通过cont ...
- 【iOS】swift-通过JS获取webView的高度
let webHeightStr = webView.stringByEvaluatingJavaScriptFromString("document.body.scrollHeight& ...
- iOS UITextField实时监听获取输入内容,中文状态去除预输入拼音
http://blog.csdn.net/cse110/article/details/51360796 - (void)textFieldDidChange:(UITextField *)textF ...
- 【转】 Android WebView内容宽度自适应
我们平常在项目中有可能会遇到网页的内容是通过json数据传递到app上面用WebView来显示的,这时候我们通常都要调整内容的总宽度不超过父容器的宽度,这样子用户可以不用左右滑动就可以看到全部的内容. ...
- flex布局时,内容区域自适应高度
页面元素高度固定,中间的元素需要撑满屏幕,或者内容多时显示滚动条时,我们要把父元素设置为height:100vh <div class="parent"> <di ...
- iOS实现页面既显示WebView,WebView下显示TableView,动态计算WebView内容高度
实现效果如下: 忽略底部的评论视图,太丑了,待完善...... 实现思路: 1>页面布局采用TableView实现,顶部"关注"模块的View是TableView的table ...
随机推荐
- HTC VIVE SDK 中的例子 hellovr_opengl 程序流程分析
最近Vive的VR头盔设备很火,恰逢项目需求,所以对 SDK 中的例子 hellovr_opengl 做了比较细致的代码分析,先将流程图绘制如下,便于大家理解. 在ViVe头盔中实现立体效果的技术核心 ...
- 【招聘App】—— React/Nodejs/MongoDB全栈项目:消息列表
前言:最近在学习Redux+react+Router+Nodejs全栈开发高级课程,这里对实践过程作个记录,方便自己和大家翻阅.最终成果github地址:https://github.com/66We ...
- 除了cPickle,cjson外还有没有更高效点的序列化库了
除了cPickle,cjson外还有没有更高效点的序列化库了 http://blog.csdn.net/chen_lovelotus/article/details/7228745 msgpack最快 ...
- grid 布局 属性示例
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- Jersey 1.18 API文档
Jersey 1.18 API文档 我自己制作了Jersey 1.18 API CHM文档, 下载地址见: http://download.csdn.net/detail/chszs/7334869 ...
- .NET 环境中使用RabbitMQ RabbitMQ与Redis队列对比 RabbitMQ入门与使用篇
.NET 环境中使用RabbitMQ 在企业应用系统领域,会面对不同系统之间的通信.集成与整合,尤其当面临异构系统时,这种分布式的调用与通信变得越发重要.其次,系统中一般会有很多对实时性要求不高的 ...
- Windows环境下完全手工配置Apache、MySQL和PHP
现在LAMP(Linux.Apache.MySQL.PHP/Perl/Python的简称)已经很流行了.在Windows下也有类似的,比如 WAMP(Apache, MySQL, PHP on Win ...
- springboot学习(五) 全局异常处理
创建全局异常处理 /** * 全局异常配置管理 */ @ControllerAdvice public class GlobalExceptionConfig extends ResponseEnti ...
- C语言基础(13)-函数
一. 函数的原型和调用 在使用函数前必须定义或者声明函数. double circle(double r); int main() { ); printf("length = %f\n&qu ...
- JS DOM -- 关于回车键盘事件执行事件
一.需求制作一个模拟对话框, 二. 1.需要发送后,输入框清空 2.按enter键可发送 三.代码部分 <!DOCTYPE HTML> <html> <head> ...