最近项目中,有一个模块,需要大量的图表。而且产品明确表明,图表只有一个要求,就是要好看,座椅使用原生控件,画的话,费时费力不说,还不一定好看。所以呢,我们就用了ECharts插件,iOS直接使用webView调用H5界面。产品的需求是在不同的屏幕上展示的图表要和谐(重点是好看),所以喽,这就导致了,我们要在调用html链接生成之前,要把不同屏幕所要展示的WebView的高度传入链接中。在实际的展示中发现一个问题,恩,这个问题一会再说。现在先说说获取实际内容高度
1. WKWebView
现在很多应用都从iOS 8开始支持了,所以终于可以肆无忌惮的使用WKWebView了。在WKWebView使用过程中,获取实际内容高度,在界面加载完成时,调用
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation
{
[webView evaluateJavaScript:@"document.body.offsetHeight"completionHandler:^(id_Nullable result,NSError *_Nullable error) {
CGFloat documentHeight = [resultdoubleValue];
CGRect frame = webView.frame;
frame.size.height = documentHeight;
webView.frame = frame;
NSLog(@"webView.frame = %@",NSStringFromCGRect(webView.frame));
}];
}
2.UIWebView
好吧,获取UIWebView实际内容高度的方法,已经烂大街了,但是还是记录一下吧,避免忘记。这个方法是我在网上查的,具体谁写的忘记了,同样在加载完成的方法里。
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
NSString *string = [NSStringstringWithFormat:@"var script = document.createElement('script');"
"script.type = 'text/javascript';"
"script.text = \"function ResizeImages() { "
"var myimg,oldwidth,oldheight;"
"var maxwidth=%f;"/** 此处为缩放系数*/
"for(i=0;i <document.images.length;i++){"
"myimg = document.images[i];"
"if(myimg.width > maxwidth){"
"oldwidth = myimg.width;"
"myimg.width = maxwidth;"
"oldheight = myimg.height"
"myimg.height = oldheight * (maxwidth/oldwidth);"
"}"
"}"
"}\";"
"document.getElementsByTagName('head')[0].appendChild(script);",SCREEN_WIDTH -30 * WIDTH_SCALE];
[webView stringByEvaluatingJavaScriptFromString:string];
[webView stringByEvaluatingJavaScriptFromString:@"ResizeImages()"];
/** 获取页面高度*/
NSString *offsetHeightStirng = [webViewstringByEvaluatingJavaScriptFromString:@"document.body.offsetHeight"];
CGFloat offsetHeight = [offsetHeightStirngfloatValue];
/** 设置到 WebView 上*/
webView.frame =CGRectMake(0,0,self.view.frame.size.width, offsetHeight);
/** 获取WebView最佳尺寸*/
CGSize frame = [webViewsizeThatFits:webView.frame.size];
/** 获取内容实际高度*/
NSString *heightString = [webViewstringByEvaluatingJavaScriptFromString:
@"document.getElementById('webview_content_wrapper').offsetHeight + parseInt(window.getComputedStyle(document.getElementsByTagName('body')[0]).getPropertyValue('margin-top')) + parseInt(window.getComputedStyle(document.getElementsByTagName('body')[0]).getPropertyValue('margin-bottom'))"];
CGFloat height = [heightStringfloatValue];
/**内容实际高度 和 像素的比*/
height = height * frame.height / offsetHeight;
/** 重新设置 WebView 高度 */
webView.frame = CGRectMake(0, 0, self.view.frame.size.width,height)
NSLog(@"webView.frame = %@",NSStringFromCGRect(webView.frame));
}
另外提供一种UIWebView不太靠谱的一种方法,为什么说不太靠谱呢?是因为提供这个方法的人,说这个方法是可以的获取到webview高度的,但是我在使用过程中,并没有什么卵用,但是呢,也提供出来吧,可能是我用的方法不对呢,这谁知道呢。。。同样,在界面加载完成时
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
CGSize actualSize = [webViewsizeThatFits:CGSizeZero];
CGRect newFrame = webView.frame;
newFrame.size.height = actualSize.height;
webView.frame = newFrame;
}
/ 万恶的分割线 //
在使用ECharts过程中,我们要将webview高度,作为参数,传递给html,但是html设置的高度,居然是 int 类型,没错,就是int类型,导致我们这边必须传入整数。开始我们并不知道这个事情,所以传入的是计算后的比例值,这个比例值是个保留小数点后两位的 float 类型,这就导致了,此时展示的webview尺寸,不是我传入的尺寸,而是前端写的默认值。导致图表高度展示不全。