OC - WebView使用 之 获取 WebView 实际内容高度 及 其中一种导致WebView展示不全的bug

最近项目中，有一个模块，需要大量的图表。而且产品明确表明，图表只有一个要求，就是要好看，座椅使用原生控件，画的话，费时费力不说，还不一定好看。所以呢，我们就用了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尺寸，不是我传入的尺寸，而是前端写的默认值。导致图表高度展示不全。