iOS与WKWebView交互问题——动态获取webView高度
2022-01-26 本文已影响0人
稻草人12138
在iOS原生界面有时会遇到需要使用或加入一部分webview模块，我们知道在加载html文本后获取webview高度可以通过以下方法
#pragma mark - KVO
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context {
if (_webView.estimatedProgress >= 1.0f) {
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.2 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
CGFloat height = self.webView.scrollView.contentSize.height;
self.webView.height = height;
NSLog(@"height---%f",self.webView.scrollView.contentSize.height);
if (self.detailHieghtBlock) {
self.detailHieghtBlock(height+0.001);
}
});
}
}
来进行高度传递，但是在特定的需求下这个方式就不太够用，比如
当需要修改 webview 的字体大小的时候，需要设置更新 webview 的 frame，这时候就会遇到常见的一个问题，就是当字体 从小到大 变化的时候是正常的，当字体 从大到小 变化的时候，webview 的高度不会变化，这样就导致webview的底部一大片的空白
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
__weak typeof(self) weakSelf = self;
[webView evaluateJavaScript:@"document.body.offsetHeight" completionHandler:^(id _Nullable m, NSError * _Nullable error) {
CGFloat webHeight = [m floatValue];
webView.frame = CGRectMake(15, 0, kScreenWidth-30, webHeight);
}];
}
这时候我们可以在 body标签内部再套一层标签，如下：
<body><div id='bodybox'></div></body>
然后再获取div的高度
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
__weak typeof(self) weakSelf = self;
[webView evaluateJavaScript:@"document.getElementById('bodybox').offsetHeight" completionHandler:^(id _Nullable m, NSError * _Nullable error) {
CGFloat webHeight = [m floatValue];
webView.frame = CGRectMake(0, 0, kScreenWidth, webHeight);
}];
}
按照这个办法来做的话，就可以准确的获取到webview的高度了，无论字体从大到小还是从小到大，获取的高度都是正确的。
知识点
解决该问题之后，需要了解下面关于 html 的知识点：
1、 body标签
body 标签的高度设定好之后，如果里面内容的高度大于 body 的高度，那么 body 会被撑开，高度发生变化，反之，body 的大小不会发生改变，高度自然也就是固定的了。
2、设置字体大小
document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= 100%
复制代码
3、获取body的高度
document.body.offsetHeight
