【潮汐】iOS-WKWebView获取高度终极版
2018-12-19 本文已影响7人
爱恨的潮汐
前言:
WKWebView在iOS上获取高度不准这个问题困扰了很久,网上查了好多方法,在复杂场景下都会偶尔不准。最终这样解决:【iOS+H5获取网页高度然后回传给iOS】
1、KVO获取--->偶尔不准:
[self. webView.scrollView addObserver:self forKeyPath:@"contentSize" options:NSKeyValueObservingOptionNew context:nil];
2、网页加载完成后获取--->偶尔不准:
//网页加载完成
//页面加载完后获取高度,设置脚,注意,控制器里不能重写代理方法,否则这里会不执行
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{
// 不执行前段界面弹出列表的JS代码,关闭系统的长按保存图片
[self evaluateJavaScript:@"document.documentElement.style.webkitTouchCallout='none';" completionHandler:nil];
// document.body.scrollHeight(不准) document.body.offsetHeight;(好)
[webView evaluateJavaScript:@"document.body.offsetHeight;" completionHandler:^(id Result, NSError * error) {
NSString *heightStr = [NSString stringWithFormat:@"%@",Result];
//必须加上一点
CGFloat height = heightStr.floatValue+15.00;
//网页加载完成
NSLog(@"新闻加载完成网页高度:%f",height);
}
当然UIWebView也有这些方法,最终获取都偶尔不准,也可以用如下方法解决。
下面是终极解决办法【iOS+H5获取网页高度然后回传给iOS】:
注意事项:
(1)H5那边一定要在文字跟图片都加载完成再去获取高度,因为图片是异步加载的,否则获取到的高度不准。
(2)H5返回来的高度直接使用就可以,不需要进行任何px、pt乱七八糟的单位换算。
1、初始化
//(1)进行配置控制器---跟H5交互用
WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
//实例化对象
configuration.userContentController = [WKUserContentController new];
WKWebView * webView = [[WKWebView alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, 10)];
//(2)与JS交互的注册,JS调用OC方法--注册前先z初始化上面方法
[webView.configuration.userContentController addScriptMessageHandler:self name:@"getWkWebViewHeight"];
//(3)加载url
[webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:self.urlString]]];
//(4)HTML内容从后台请求完成后传给H5--js,等待H5加载完页面给iOS回调高度【注意:H5那边一定要在图片也加载完后才返回高度,不然返回的高度不准】
NSString * HtmlStr = @"<p>HTML内容</p>
";
NSDictionary *dicData = @{@"content": HtmlStr};
//字典转JSON
NSString * jsonStr = [NSDictionary dictionaryToJson:dicData];
NSString *js = [NSString stringWithFormat:@"window.dataInfo = %@", jsonStr];
WKUserScript *script = [[WKUserScript alloc] initWithSource:js injectionTime:(WKUserScriptInjectionTimeAtDocumentStart) forMainFrameOnly:YES];
[[self configuration].userContentController addUserScript:script];
2、接收H5返回的高度,然后刷新tableView
//得到js传输回来的数据
//WKScriptMessageHandler协议方法
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
//code
// NSDictionary *dictData = [NSDictionary jsonToDictionaryWithJsonString:message.body];
if ([message.name isEqualToString:@"getWkWebViewHeight"]) {
NSLog(@"获取新闻高度:%@",message.body);
if ([self.typeString isEqual:@"新闻详情"]) {
NSString * strHeight = [NSString stringWithFormat:@"%@",message.body];
CGFloat heightWeb = [strHeight doubleValue];//得到网页高度
//网页高度回调
if (self.WebviewHeight) {
self.WebviewHeight(heightWeb);
}
}
}
}