关于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内容高度,自适应高度的更多相关文章

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

    前言:是这样的,刚写完上一篇文章还没缓过神来,上一篇文章我还提到了,想和大家聊聊原生+H5如何无缝连接的故事.结果我朋友就给我发了两篇他的作品.他的做法也都有独到之处.好的文章都是这样,让你每次看都能 ...

  2. iOS【野路子】精准获取webView内容高度,自适应高度

    关于WebView内容高度的获取,相信很多人都踩过坑,无法获取到准确高度,导致页面布局出现差错,搜到的资料很多但都无法解决问题,以下是个人经验总结: 项目需求实现H5文章&原生评论效果,文章是 ...

  3. android 获取webview内容真实高度(webview上下可滚动距离)

    正常获取: mainWebView.getContentHeight()//获取html高度 mainWebView.getScale()//手机上网页缩放比例 mainWebView.getHeig ...

  4. appium不能获取webview内容的解决办法

    在用appium对小猿搜题app进行自动化测试时,准备用page_source打印出文章的xml内容 但是发现只能打印出外部结构内容,实际的文章内容却没有显示 截图如下 查询之后,得知需要通过cont ...

  5. 【iOS】swift-通过JS获取webView的高度

     let webHeightStr = webView.stringByEvaluatingJavaScriptFromString("document.body.scrollHeight& ...

  6. iOS UITextField实时监听获取输入内容,中文状态去除预输入拼音

    http://blog.csdn.net/cse110/article/details/51360796 - (void)textFieldDidChange:(UITextField *)textF ...

  7. 【转】 Android WebView内容宽度自适应

    我们平常在项目中有可能会遇到网页的内容是通过json数据传递到app上面用WebView来显示的,这时候我们通常都要调整内容的总宽度不超过父容器的宽度,这样子用户可以不用左右滑动就可以看到全部的内容. ...

  8. flex布局时,内容区域自适应高度

    页面元素高度固定,中间的元素需要撑满屏幕,或者内容多时显示滚动条时,我们要把父元素设置为height:100vh <div class="parent"> <di ...

  9. iOS实现页面既显示WebView,WebView下显示TableView,动态计算WebView内容高度

    实现效果如下: 忽略底部的评论视图,太丑了,待完善...... 实现思路: 1>页面布局采用TableView实现,顶部"关注"模块的View是TableView的table ...

随机推荐

  1. IE漏洞调试之CVE-2013-3893

    前言 Windows平台的漏洞挖掘和安全研究中,IE始终是绕不开的话题.IE漏洞就跟adobe系列一样经典,是学习exploit.shellcode的绝佳途径. 在IE漏洞中,UAF即Use-Afte ...

  2. mongodb权限管理(转)

    Mongodb 预定义角色 Mongodb 中预定义了一些角色,把这些角色赋予给适当的用户上,用户就只能进行角色范围内的操作. 数据库用户角色 (所有数据库都有) read 用户可以读取当前数据库的数 ...

  3. 機器學習基石(Machine Learning Foundations) 机器学习基石 作业四 Q13-20 MATLAB实现

    大家好,我是Mac Jiang,今天和大家分享Coursera-NTU-機器學習基石(Machine Learning Foundations)-作业四 Q13-20的MATLAB实现. 曾经的代码都 ...

  4. 【Dos】Dos命令大全

    dos命令大全 AT 计划在计算机上运行的命令和程序.ATTRIB 显示或更改文件属性.BREAK 设置或清除扩展式 CTRL+C 检查.CACLS 显示或修改文件的访问控制列表(ACLs).CALL ...

  5. Python爬取豆瓣《复仇者联盟3》评论并生成乖萌的格鲁特

    代码地址如下:http://www.demodashi.com/demo/13257.html 1. 需求说明 本项目基于Python爬虫,爬取豆瓣电影上关于复仇者联盟3的所有影评,并保存至本地文件. ...

  6. 改变Prompt默认路径,Change Default Visual Studio Command Prompt Location

    在项目中经常需要使用 Visual Studio Command Prompt编译项目,每次启动时都是默认进入 C:\windows\system32> 目录, 需要cd切换路径,如果把Visu ...

  7. 转用Jmeter测试RabbitMQ

    转自:https://blog.csdn.net/luozhuwang/article/details/62044872 1.下载AMQP插件 github上面有源码,可以通过ant+ivy在本地进行 ...

  8. linux 查看cpu相关信息命令

  9. JDK1.9环境变量配置

    JAVA_HOME C:\Program Files\Java\jdk-9.0.1 JRE_HOME C:\Program Files\Java\jre-9.0.1 PATH .;%JAVA_HOME ...

  10. Atitit.一些公司的开源项目 重大知名开源项目attilax总结

    Atitit.一些公司的开源项目 重大知名开源项目attilax总结 1. Twitter--Bootstrap:1 2. Google2 2.1. Gson2 2.2. Angular.Js2 2. ...