WKWebView通过监听ContentSize更新WebView的Frame导致Height持续增长的bug解决方案（编辑于2018081

问题描述

最近眼红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字体大小,设置宽度及缩放效果