iOS 日常开发WKWebView高度问题

获取高度方案1

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

WKWebViewJSHeight.jpg

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

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

获取高度方案2

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

WKWebViewContentSizeHeight.jpg

如果 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 的页面空白问题

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

1. WKWebView 在设置为不可滚动时，会有出现内容空白的可能，原因大致是出于性能考量。平时使用 iPhone 自带的 Safari 浏览器，如果点击页面跳转，但新内容尚未加载时，上下滑动时就可以看到有空白。
2. 可以通过 WKWebView 实例调用 setNeedsLayout 方法来解决这个问题。