ios 计算html的高度,iOS 计算WKWebView的内容高度

我的业务场景：商品详情页面，顶部的商品价格描述的部分是native开发，下面的所有的商品详情图片，是html标签，客户端在展示的时候，我们是把整个页面用scrollView做滑动效果，上面放一个WKWebView加载html标签

把WKWebView的滚动关闭self.webview.scrollView.scrollEnabled = NO;让整个页面只有scrollView带动滚动。

实现要点：实时计算WKWebView的contentSize，设置为WKWebView的frame大小，并改变scrollView的contentSize

这里提供一个demo参考：点击查看Demo

方法一

直接在didFinishNavigation设置一次frame，这样的话必须等到webview加载完成之后，可能会有卡顿，如果html内容少可以这么用；

方法二

利用KVO获取webview的contentSize变化来设置frame，这样能实时设置；

看代码

// 创建webview

- (void)viewDidLoad {

[super viewDidLoad];

NSString *jScript = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";

WKUserScript *wkUScript = [[WKUserScript alloc] initWithSource:jScript injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];

WKUserContentController *wkUController = [[WKUserContentController alloc] init];

[wkUController addUserScript:wkUScript];

WKWebViewConfiguration *wkWebConfig = [[WKWebViewConfiguration alloc] init];

wkWebConfig.userContentController = wkUController;

self.webview = [[WKWebView alloc]initWithFrame:CGRectMake(0, MaxY(titleBgView), SCREEN_WIDTH, SCREEN_HEIGHT-BottomBarHeight-SafeAreaTopHeight-(ScaleHeight(296)+103+52)) configuration:wkWebConfig];

self.webview.userInteractionEnabled = NO;

self.webview.scrollView.scrollEnabled = NO;

self.webview.UIDelegate = self;

self.webview.navigationDelegate =self;

NSURL *baseUrl = [NSURL URLWithString:@""];

[self.webview loadHTMLString:@"" baseURL:baseUrl];

[self.scrollview addSubview:self.webview];

self.webview.backgroundColor = [UIColor whiteColor];

// 添加kvo监听webview的scrollView.contentSize变化

[self.webview addObserver:self forKeyPath:@"scrollView.contentSize" options:NSKeyValueObservingOptionNew context:nil];

}

#pragma mark 获取webView的高度

// 加载成功之后计算高度

-(void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation

{

// 计算WKWebView高度

[webView evaluateJavaScript:@"document.body.offsetHeight" completionHandler:^(id _Nullable result, NSError * _Nullable error) {

CGRect frame =webView.frame;

frame.size.height =[result doubleValue];

webView.frame = frame;

self.scrollview.contentSize = CGSizeMake(SCREEN_WIDTH, ScaleHeight(296)+frame.size.height);

}];

}

// 使用kvo监听到的contensize变化，之所以在这里设置，因为webview加载的内容多的时候 是一段一段加载初开的，所以webview的contensize是实时变化的，所以在这里监听到可以以达到实时改变，不至于页面卡顿

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context {

if (object == self.webview && [keyPath isEqual:@"scrollView.contentSize"]) {

UIScrollView *scrollView = self.webview.scrollView;

CGSize size = CGSizeMake(SCREEN_WIDTH, scrollView.contentSize.height);

self.webview.frame = CGRectMake(0, MaxY(self.midView)+7+40, SCREEN_WIDTH, size.height);

self.scrollview.contentSize = CGSizeMake(SCREEN_WIDTH, ScaleHeight(296)+size.height);

}

}