iOS 日常开发WKWebView高度问题

获取高度方案1

网上最多的就是这个方法,设置 navigationDelegate,然后在 webView:didFinishNavigation: 方法中执行一段脚本,获取页面高度,整体像这样:

WKWebViewJSHeight.jpg

通过 WKWebView 执行脚本获取 h5 内容高度的方法中,js 中对应有这么几个高度:scrollHeightclientHeightoffsetHeight,它们之间的区别,stackOverFlow 上一张图很形象:

所以,我们需要获取页面的 scrollHeight 高度。但是这个高度有些情况下会有问题,有时候,页面加载完成并不代表页面中的所有内容都已经加载完毕,有些网页的图片使用到了懒加载的技术,只有页面滚动到图片的位置时,图片才会加载出来,而在这之前,页面上显示的是占位图。如果占位图和要加载的图片大小一致,则高度正常,内容完整显示,万事大吉。否则,如果占位图比最终显示的图片高度要高,则最后显示时,WKWebView 会有留白(高度被占位图撑的过大了),反之,内容则会显示不完整(获取到的高度偏小)。这里插一句,WKWebView 显示图片时,如果图片尺寸超过 WKWebView 的尺寸,WKWebView 会进行等比缩放进行展示。

获取高度方案2

通过 KVO 监听 WKWebViewscrollViewcontentSize,这样每当页面内容发生改变时,我们都能获取到最新的页面高度。

WKWebViewContentSizeHeight.jpg

如果 WKWebView 是嵌套在 UITableView 中,还需要注意在列表滑动的时候,应该避免 WKWebView 重复加载,而且高度也应该缓存起来。另外,当嵌套在 UITableView 中,WKWebView 高度更新也是比较棘手的问题。如果 WKWebViewUITableView 的头部视图,相对来说还简单一点,可以重新设置高度,再重新设置头部视图即可。如果是嵌套在 cell 中而且使用的是 AutoLayout 布局,在更新 WKWebView 的高度时,就不仅需要包含 WKWebViewcell 更新约束,同时父视图 UITableView 也需要进行视图更新。常用的方法有:

  • 使用 beginUpdatesendUpdates
  • 使用 moveRowAtIndexPath:toIndexPath:,这里前后两个 NSIndexPath 值一样,都是包含 WKWebViewcellindexPath

不过,我在使用这两种方法时,都偶尔会有崩溃的问题出现,而且一般都是在数据刚加载完立马滑动视图时出现崩溃,原因也很诡异:

[__NSArrayM objectAtIndex:]: index 6 beyond bounds [0 .. 5]

提示数组越界,网上的说法比较倾向于 UITableView 内部的错误,真正的原因目前未知。后来暂时的优化方案是进行高度过滤,只有在监听到的高度大于某个值后才去更新 UITableView,能一定程度降低崩溃,但不能避免。

WKWebView 的页面空白问题

关于原因,这篇文章说的很清楚,从界面分析到源代码,有理有据。在实际中使用时,大概有这么两点需要注意:

  1. WKWebView 在设置为不可滚动时,会有出现内容空白的可能,原因大致是出于性能考量。平时使用 iPhone 自带的 Safari 浏览器,如果点击页面跳转,但新内容尚未加载时,上下滑动时就可以看到有空白。
  2. 可以通过 WKWebView 实例调用 setNeedsLayout 方法来解决这个问题。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,638评论 25 708
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,259评论 4 61
  • “我们两口子挣了半辈子钱,就指望着能给他娶个好媳妇,下半辈子我俩就省心了” 这是我在从西安去往成都的火...
    戎装宛马阅读 230评论 0 1
  • 在我二十一,二十六岁时,父母相继过世,树大分杈,娃大分家,哥哥姐姐先后成家另过。我一个人在广东晃晃悠悠,开年提着包...
    别山举水阅读 4,088评论 132 142
  • 物质和能量可以相互转换 不同的表现方式 eV
    ww4u阅读 88评论 0 0