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 ...
随机推荐
- MyBatis学习-偏实践(单独MyBatis项目)
准备先把MyBatis搞熟悉了,然后把SpringMVC搞熟悉了. MyBatis的材料,除了我之前自己实验的 http://www.cnblogs.com/charlesblc/p/5906431. ...
- vue-resource的使用中需要注意的坑
先看一段代码: export default { name: 'app', data() { return { articles: [] } }, created: function() { this ...
- Java Web---登录验证和字符编码过滤器
什么是过滤器? 在Java Web中,过滤器即Filter.Servlet API中提供了一个Filter接口(javax.servlet.Filter).开发web应用时,假设编写的Java类实现了 ...
- 修改git的author 和 commiter
点击:Add Entry
- 阿里云ECS linux通过rinetd 端口转发来访问内网服务
一.场景说明: 可以通过端口映射的方式,来通过具有公网的云服务器 ECS 访问用户名下其它未购买公网带宽的内网 ECS 上的服务.端口映射的方案有很多,比如 Linux 下的 SSH Tunnel.r ...
- 倍福TwinCAT(贝福Beckhoff)应用教程12.1 TwinCAT控制松下伺服 连接和试运行
首先是用松下伺服自带的软件可以测试运行(驱动器,电机都连接好,然后用USB线连接到松下伺服驱动器的X1口),打开调试软件会自动提示连接到伺服 一般需要对驱动器清除绝对值编码器数据(驱动器可能报错4 ...
- Android编程之常识 - 混淆
1,什么是混淆编译 ProGuard是一个免费的java类文件压缩,优化,混淆器.它探测并删除没有使用的类,字段,方法和属性.它删除没有用的说明并使用字节码得到最大优化.它使用无意义的名字来重命名类, ...
- PHP-手册阅读
配置选项: html_errors: 无意义的 HTML 标记符会使得出错信息很凌乱, 所以在外壳下阅读报错信息是十分困难的, 因此将该选项的默认值改为 FALSE implicit_flush: 在 ...
- bye 2013 hello 2014
最近两个月除了必要的工作外,其余时间都在干一些我其实平时很少干的事, 喝酒.唱歌.打麻将.玩牌.以及到处跑找朋友玩,也许是过年的原因我放纵了自己,也许是自己心中的烦恼.我的博客记录着我每次看书学习的笔 ...
- vb调试dll
1.有两个工程BW_DetectCard.vbp(生成dll)及识别卡检测软件.vbp(生成exe) 2.打开工程<识别卡检测软件.vbp>,在文件--添加工程--现存,找到要引用的dll ...