问题描述
最近眼红WKWebView相对UIWebView的高可配置和高效。在最近的代码中选择使用WKWebView来加载JS动态页面。但是需要把WebView嵌入到另一个ScrollView中显示，所以需要拉伸到内容长度且不能被用户拖动。原始代码如下：
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
[webView evaluateJavaScript:@"document.body.scrollHeight" completionHandler:^(NSNumber *height, NSError * _Nullable error) {
float htmlHeight =[height floatValue];
CGRect webFrame = webView.frame;
webFrame.size.height = htmlHeight;
webView.frame = webFrame;
[self addFeedBackBtn];
}];
}
通过JS代码得到页面的高度。
但是这样的方法对于非静态页面无效，高度并非正确的高度。
解决办法
编辑于20180813
下面的分割线后是最初始的解决办法，但是在部分极端情况下还有用户反应会出现高度持续增长的问题。
最终找到的原因是WKWebView的frame宽度带有小数，而不是整数。猜测WKWebView在计算contentSize的时候是依照frame.width向下取整的宽度来计算最终的contentSize的height的，然后导致KVO观察的contentSize高度在更新frame高度后持续增加。
更新的解决办法是对WKWebView的frame宽度求整。
代码如下_webView.frame = CGRectMake(HWFrame_IPhonePadX(20, 30), height, (NSInteger)(ScreenWidth - HWFrame_IPhonePadX(60, 80)), 0);。
BTW. 之所以我们的WKWebView的frame宽度会带小数是因为我们的HWFrame_IPhonePadX宏会自适应屏幕宽高生成输入数值对应的实际显示数值（这个数字是比例计算而来，会带有小数位）。所以就尴尬了，产生了WKWebView高度持续增加的bug。
初始解决方案
为了监控JS动态页面的当前高度，选择使用KVO监听WKWebView.scrollView的contentSize变化。在收到变化通知是，通过当前的contentSize更新webView的frame。代码如下：
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context {
if (object == _webView.scrollView && [keyPath isEqualToString:@"contentSize"]) {
NSLog(@"_webView.scrollView.contentSize %f %f", self.webView.scrollView.contentSize.width, self.webView.scrollView.contentSize.height);
CGRect webFrame = self.webView.frame;
webFrame.size.height = self.webView.scrollView.contentSize.height;
self.webView.frame = webFrame;
}
}
该方法可以基本解决访问动态页面，实时更新页面高度的问题。
使用KVO记得移除Observer，同时避免过度移除的crash。可以使用下方代码解决
- (void)removeWebViewObserver {
@try {
if (_webView) {
[_webView.scrollView removeObserver:self forKeyPath:@"contentSize"];
}
}
@catch (NSException *exception) {
NSLog(@"多次删除kvo 报错了");
}
}
偶发问题
上方方法小概率下会出现监听持续被触发，contentSize.height持续不断增加，从而使得设置的frame的高度也在不断增加，无限循环增高。
我当时工程内的表现为高度每次加一。
解决方案一
通过
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context {
if (object == _webView.scrollView && [keyPath isEqualToString:@"contentSize"]) {
NSLog(@"_webView.scrollView.contentSize %f %f", self.webView.scrollView.contentSize.width, self.webView.scrollView.contentSize.height);
CGRect webFrame = self.webView.frame;
webFrame.size.height = self.webView.scrollView.contentSize.height - 1; // 每次减一可以结局死循环，持续增加高度。
self.webView.frame = webFrame;
}
}
该办法可以解决持续增加高度的问题。但是没有找到根本原因，无法确定所有页面都是每次加一，还是有其他可能的情况。所以该方法放弃。
解决方案二
把WKWebView更换为UIWebView，同样也通过监听contentSize来动态更新webView高度，没有出现上方的偶发问题，高度不会持续增加。
但是WKWebView比UIWebView更加高效和苹果更加推荐，所以也放弃。
解决方案三
测试代码，发现如果不仅仅更新frame的height，取而代之的通过contentSize同时更新webView的frame的宽高，就不会出现高度的持续增高。但是页面内容宽度会失去限制，超过webView页面范围。
最终解决方案是通过JS代码限制webView的内容宽度。
方案是不更改监听代码，也不对监听得到的高度减一。更新WKNavigationDelegate的- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation如下：
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
if (webView == _webView) {
NSString *meta = [NSString stringWithFormat:@"document.getElementsByName(\"viewport\")[0].content = \"width=self.webView.frame.size.width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no\""];
[_webView evaluateJavaScript:meta completionHandler:^(id _Nullable complete, NSError * _Nullable error) {
if (complete != nil) {
NSLog(@"complete %@", complete);
} else if (error) {
NSLog(@"error %@", error);
}
}];
}
}
通过强制设置页面的宽度为我们当前的webView的宽度。解决偶尔出现的高度持续增加的Bug。
Reference
How to determine the content size of a UIWebView?
iOS 修改webView字体大小,设置宽度及缩放效果
