Cell 嵌套 WebView 高度及宽度计算解决办法(完美版)

此方法适用于CollectionView,tableView
解决了以下几个问题

• 解决了由于WebView中图片过大或者过小而显示不全的问题
• 解决了循环刷新CollectionView,tableView的问题
• 解决了高度计算不准确的问题

转载请注明出处

无循环刷新问题,性能良好

性能良好

性能良好

NSString+js.h

//by:HQ
#import "NSString+js.h"

/**
 宽度计算

 @param width 屏幕宽度
 @return 宽度
 */
+ (instancetype)getJSWithScreentWidth:(CGFloat) width;


/**
 高度计算

 @param webView
 @return 高度
 */
+ (instancetype)getJSWithScreentHeightWithWebView:(UIWebView*)webView;
@end

NSString+js.m

//by:HQ
#import "NSString+js.h"

@implementation NSString (js)
//宽度计算
+ (instancetype)getJSWithScreentWidth:(CGFloat) width{
    NSString *path = [[NSBundle mainBundle] pathForResource:@"webviewDeal.js" ofType:nil];
    NSString *js = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:NULL];
    return [NSString stringWithFormat:@"%@ \n autoSizeFit(%@);",js,[NSString stringWithFormat:@"%.2f",width]];
}
//高度计算
+ (instancetype)getJSWithScreentHeightWithWebView:(UIWebView *)webView{
    CGFloat height =[[webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('body')[0].scrollHeight"] floatValue];
    return [NSString stringWithFormat:@"%f",height];
}
@end

计算宽度核心代码

新建一个.js文件,把代码复制进去(例如:webviewDeal.js)

//  by HQ

var autoSizeFit = function(screenWidth){
    //1.设置所有字体
    var body = document.getElementsByTagName("body")[0];
    //设置body的宽度
    body.style.width = screenWidth;
    //设置body的字体
    var bodyStyleFontSize = body.style.fontSize;
    //设置整个body的宽度
    var bodyStyleWidth = body
    if(bodyStyleFontSize.length<=0){
        document.getElementsByTagName("body")[0].style.fontSize = 14;
    }
    
    //2获取table的宽度
    var tables = document.getElementsByTagName("table");
    for(var i=0;i<tables.length;i++){
        //2.1.设置所有表格的字体
        //判断是否有style属性的fontSize是否有值
        var table = tables[i];
        
        var tableStyleFontSize = table.style.fontSize;
        if(tableStyleFontSize.length<=0){//没有设置了table的fontSize
            table.style.fontSize = 14;
        }
        
        //2.2.设置表格的宽度
        var tableStyleWidth = table.style.width;
        table.style.width = screenWidth;
    }
    
    //3.设置图片
    var images = document.getElementsByTagName("img");
    for(var i=0;i<images.length;i++){
        var image = images[i];
        //设置图片的宽高比例
        
        var imgWidth = image.width;
        var imgHeight = image.height;
        var scale = imgHeight/imgWidth;
        
        //再通过比例来设置图片的宽高
        image.width = screenWidth;
        image.height = screenWidth*scale;
    }
    
    //4.设置所有div的宽度
    var divs = document.getElementsByTagName("div");
    for(var i=0;i<divs.length;i++){
        var div = divs[i];
        div.style.width = screenWidth;
    }
    
    //5.设置ul
    var uls = document.getElementsByTagName("ul");
    for(var i=0;i<uls.length;i++){
        var ul = uls[i];
        ul.style.width = screenWidth;
    }
}

如何使用?

//by:HQ
#pragma mark - UIWebViewDelegate
-(void)webViewDidFinishLoad:(UIWebView *)webView{
   //注入js,设置宽度
    NSString *jsStr = [NSString getJSWithScreentWidth:kSCREEN_WIDTH-35];
   [webView stringByEvaluatingJavaScriptFromString:jsStr];
   
  //获取高度
    CGFloat height = [NSString getJSWithScreentHeightWithWebView:webView].floatValue;
//获取模型的高度,判断模型中的高度是不是WebView的高度,如果不是则赋值给模型,赋值给模型后,高度相等,不在进入判断语句内,不再出现循环刷新问题
  ProductInfo * productInfo = self.concroteDetailsModel.productInfo;
    if (height!=productInfo.descriptionCellHigh) {
        productInfo.descriptionCellHigh  = height;
        [self.collectionView reloadSections:[NSIndexSet indexSetWithIndex:4]];
    }
    
}