获取高度方案1
网上最多的就是这个方法,设置 navigationDelegate
,然后在 webView:didFinishNavigation:
方法中执行一段脚本,获取页面高度,整体像这样:
通过
WKWebView
执行脚本获取 h5 内容高度的方法中,js
中对应有这么几个高度:scrollHeight
、clientHeight
和 offsetHeight
,它们之间的区别,stackOverFlow 上一张图很形象:
所以,我们需要获取页面的 scrollHeight
高度。但是这个高度有些情况下会有问题,有时候,页面加载完成并不代表页面中的所有内容都已经加载完毕,有些网页的图片使用到了懒加载的技术,只有页面滚动到图片的位置时,图片才会加载出来,而在这之前,页面上显示的是占位图。如果占位图和要加载的图片大小一致,则高度正常,内容完整显示,万事大吉。否则,如果占位图比最终显示的图片高度要高,则最后显示时,WKWebView
会有留白(高度被占位图撑的过大了),反之,内容则会显示不完整(获取到的高度偏小)。这里插一句,WKWebView
显示图片时,如果图片尺寸超过 WKWebView
的尺寸,WKWebView
会进行等比缩放进行展示。
获取高度方案2
通过 KVO
监听 WKWebView
的 scrollView
的 contentSize
,这样每当页面内容发生改变时,我们都能获取到最新的页面高度。
如果
WKWebView
是嵌套在 UITableView
中,还需要注意在列表滑动的时候,应该避免 WKWebView
重复加载,而且高度也应该缓存起来。另外,当嵌套在 UITableView
中,WKWebView
高度更新也是比较棘手的问题。如果 WKWebView
是 UITableView
的头部视图,相对来说还简单一点,可以重新设置高度,再重新设置头部视图即可。如果是嵌套在 cell
中而且使用的是 AutoLayout
布局,在更新 WKWebView
的高度时,就不仅需要包含 WKWebView
的 cell
更新约束,同时父视图 UITableView
也需要进行视图更新。常用的方法有:
- 使用
beginUpdates
和endUpdates
; - 使用
moveRowAtIndexPath:toIndexPath:
,这里前后两个NSIndexPath
值一样,都是包含WKWebView
的cell
的indexPath
。
不过,我在使用这两种方法时,都偶尔会有崩溃的问题出现,而且一般都是在数据刚加载完立马滑动视图时出现崩溃,原因也很诡异:
[__NSArrayM objectAtIndex:]: index 6 beyond bounds [0 .. 5]
提示数组越界,网上的说法比较倾向于 UITableView
内部的错误,真正的原因目前未知。后来暂时的优化方案是进行高度过滤,只有在监听到的高度大于某个值后才去更新 UITableView
,能一定程度降低崩溃,但不能避免。
WKWebView
的页面空白问题
关于原因,这篇文章说的很清楚,从界面分析到源代码,有理有据。在实际中使用时,大概有这么两点需要注意:
-
WKWebView
在设置为不可滚动时,会有出现内容空白的可能,原因大致是出于性能考量。平时使用iPhone
自带的Safari
浏览器,如果点击页面跳转,但新内容尚未加载时,上下滑动时就可以看到有空白。 - 可以通过
WKWebView
实例调用setNeedsLayout
方法来解决这个问题。