iOS【野路子】精准获取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多次加载,影响性能,建议缓存高度。

时间: 2024-10-09 10:24:12

iOS【野路子】精准获取webView内容高度,自适应高度的相关文章

iOS 【野路子】获取WKWebView内容高度做H5原生连接

前言:是这样的,刚写完上一篇文章还没缓过神来,上一篇文章我还提到了,想和大家聊聊原生+H5如何无缝连接的故事.结果我朋友就给我发了两篇他的作品.他的做法也都有独到之处.好的文章都是这样,让你每次看都能有新的收获,我们也都致力于写一些能帮别人解决问题的文章,下面我用另一种方式来完美实现这个问题.毕竟之前大家都是根据UIWebView写的,我来说说换成WK之后的区别,主题思路也不同哦~ 插两个链接,是我朋友的大家也可以做个对比 iOS [终极方案]精准获取webView内容高度,自适应高度 iOS

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

前言:是这样的,刚写完上一篇文章还没缓过神来,上一篇文章我还提到了,想和大家聊聊原生+H5如何无缝连接的故事.结果我朋友就给我发了两篇他的作品.他的做法也都有独到之处.好的文章都是这样,让你每次看都能有新的收获,我们也都致力于写一些能帮别人解决问题的文章,下面我用另一种方式来完美实现这个问题.毕竟之前大家都是根据UIWebView写的,我来说说换成WK之后的区别,主题思路也不同哦~ 插两个链接,是我朋友的大家也可以做个对比 iOS [终极方案]精准获取webView内容高度,自适应高度 iOS

ios与js交互获取webview元素和赋值

使用webview的stringByEvaluatingJavaScriptFromString的方法交互,直接提供实例. 下载:http://download.csdn.net/detail/heyuan110/4420050 附上document.location.body 属性方法 JS 对象 document:属性 document.title //设置文档标题等价于HTML的<title>标签 document.bgColor //设置页面背景色 document.fgColor /

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

在用appium对小猿搜题app进行自动化测试时,准备用page_source打印出文章的xml内容 但是发现只能打印出外部结构内容,实际的文章内容却没有显示 截图如下 查询之后,得知需要通过contexts获取所有的context,然后通过switch_to.context()切换到对应的context下便可获取 通过打印context,结果如下 显示只有一个NATIVE_APP,并没有其他的webview信息 又经过一番查询,得知只有在android4.4及以上版本的系统中才会输出更多的we

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

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

UILable根据文字内容,自适应高度

//UILabel自适应文本的高度 UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0, 100, 300, 100)]; label.numberOfLines = 0; label.lineBreakMode = NSLineBreakByWordWrapping; label.text = @"本店于十一期间特推出一系列优惠,限时限量敬请选购!沙发:钻石品质,首领风范!床垫:华贵典雅,彰显时尚!尊贵而不失奢华,典雅却不失自

【css基础】div父元素根据子元素高度自适应高度

两种情况(无特殊说明子元素都是指代父元素的第一级子元素) 第一种:若子元素没有带有float元素的元素,对于高度是自适应的没有问题. 第二种:若子元素全是带有float属性的元素,这时候我们会发现父元素塌陷,高度为0,因为float浮动元素脱离了正常的文档流,父元素相当于没有了这两个儿子! 解决这个问题的根源就是清除浮动: 1 , 给父节点增加样式overflow:hidden或者overflow:auto 2 , 在子元素中的最后一个添加一个兄弟节点,当然该节点应该是一个空节点.你可以用div

关于UIWebView设置高度自适应的问题

- (void)viewDidLoad { [super viewDidLoad]; _scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 66, 320, 480)]; //中间还有其他控件 //创建webView时要设置一个临时的frame,不然的话webViewDidFinishLoad代理方法中设置webView高度自适应之后,webView会有很多空白 _webView = [[UIWebView alloc]in

解决子级用css float浮动 而父级div没高度不能自适应高度

解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生原因. 如何解决父div对象自适应高度,方法有三种,接下来DIVCSS5逐一介绍. 1.首先我们先看HTML源代码: <!DOCTYPE html> <html> <head> <meta cha