公司有一个文章详情页面，后台提供了一部分html，头部和底部为前端自定义。要根据html的内容动态展示高度，在计算中一直拿到的高度为整屏的大小，一直没想到原因所在。
今天发现图片文本在webview的加载中，没有做到自适应。和后台小哥哥讨论之后，确定用js来动态改变高度。
- (void)webViewDidFinishLoad:(UIWebView*)webView
{
if([webViewisFinishLoading] ==YES) {
NSString *htmlHeight = [webView stringByEvaluatingJavaScriptFromString:@"document.body.offsetHeight"];
//HTML5的宽度
NSString *htmlWidth = [webView stringByEvaluatingJavaScriptFromString:@"document.body.offsetWidth"];
//宽高比
floati = [htmlWidthfloatValue]/[htmlHeightfloatValue];
floatheight = (SCREEN_WIDTH-30)/i;
CGSizecontentSize =self.webview.scrollView.contentSize;
//改变内容高度
contentSize.height= height;
floatbottomHeight =100;
//顶部视图
[self.webview.scrollViewaddSubview:self.topView];
[self.topViewmas_makeConstraints:^(MASConstraintMaker*make) {
make.top.left.mas_equalTo(0);
make.width.mas_equalTo(SCREEN_WIDTH-40);
make.bottom.equalTo(self.subLabel.mas_bottom).offset(20);
}];
float topHeight = [self.topView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize].height;
//重新设置展示网页的frame
UIView*innerWebView =self.webview.scrollView.subviews.firstObject;
CGRectframe = innerWebView.frame;
//重新设置y值
frame.origin.y= topHeight;
innerWebView.frame= frame;
//添加底部视图
self.footView.frame=CGRectMake(0, contentSize.height+ topHeight,self.view.bounds.size.width, bottomHeight);
//重新计算webview的高度
self.webview.scrollView.contentSize=CGSizeMake(contentSize.width, contentSize.height+ topHeight + bottomHeight);
[self.webview.scrollViewaddSubview:self.footView];
[MBProgressHUD hideHUDForView:self.view animated:YES];
}
}
才发现在获取文本高度时，用的方法不对，应该用document.body.offsetHeight（计算内容的高度）；之前document.body.scrollHeight是整个scroll的高度。
加载html代码的js代码
完美解决自适应问题，遗留问题终于解决，赶紧关掉bug~（注释行会影响展示，超出整屏时，第一次会展示不全）
额～ 文本内容会出现展示不全，重新解决问题
替换为document.documentElement.scrollHeight
javascript中获取dom元素高度和宽度的方法如下：
网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
对应的dom元素的宽高有以下几个常用的：
元素的实际高度：document.getElementById("div").offsetHeight
元素的实际宽度：document.getElementById("div").offsetWidth
元素的实际距离左边界的距离：document.getElementById("div").offsetLeft
元素的实际距离上边界的距离：document.getElementById("div").offsetTop