iOS日常开发过程中经常遇到web嵌套到tableview的场景,这时候webView的高度计算显得很重要。
日常使用姿势如下在webViewDidFinishLoad:方法中,通过JS注入方法获取web的高度:
NSString * clientheight_str = [webView stringByEvaluatingJavaScriptFromString: @"document.body.offsetHeight;"];
float height = [clientheight_str floatValue];
细心的同学可能会发现,使用如上方法计算高度时,有时候会出现网页显示不全的现象,也就是计算实际高度不对。
学过h5的同学都知道,上述的高度取的是网页<body><body>(网页内容)的高度,但并不是实际在webView中渲染出来之后的高度,所以要获取实际真实高度需要多一步操作,如下:
//获取页面高度(像素)
NSString * clientheight_str = [webView stringByEvaluatingJavaScriptFromString: @"document.body.offsetHeight;"];
float clientheight = [clientheight_str floatValue];
//设置到WebView上
webView.frame = CGRectMake(0, 0, ScreenWidth, clientheight);
//获取WebView最佳尺寸(点)
CGSize frame = [webView sizeThatFits:webView.frame.size];
//获取内容实际高度(像素)
NSString * height_str= [webView stringByEvaluatingJavaScriptFromString: @"document.body.offsetHeight;"];
float height = [height_str floatValue];
// //内容实际高度(像素)* 点和像素的比
height = height * frame.height / clientheight;
第一次获取高度并不是真正下是之后的高度,第二次获取的height_str才是真正webView实际显示之后的高度,代码的第三行设置webView的frame非常重要,相当于对内容的一次渲染,之后去获取才是webView显示之后的真正高度。调试断点截图如下:
可以看到两次获取body的高度不一致,第二次为实际渲染后webView的内容高度
webView实际使用中,高度计算可能受到body设置的padding和margin有关参数的影响,情况具体分析。