iOS 日常开发WKWebView高度问题

获取高度方案1

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

WKWebViewJSHeight

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

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

获取高度方案2

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

WKWebViewContentSizeHeight

如果 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 方法来解决这个问题。