zoukankan      html  css  js  c++  java
  • ios UIWebView加载HTMLStr图文,关于图片宽高设置,webView内容实际高度的踩坑问题

    一.关于UIWebView 与 WKWebView 选取问题

    从发布时间看

    2008年7月11日,在新一代iPhone3G正式发售当天,iPhone OS 2.0(iOS 2.0)推出,这时候就有UIWebView了。

    WKWebView是IOS 8.0推出,2014年9月份。新出的WKWebView是对老UIWebView的优化与升级。

    WKWebView对比UIWebView主要优势:

    • 更多的支持HTML5的特性
    • 增加了加载进度属性:estimatedProgress
    • 耗内存小,网页加载速度也有小幅度提升
    • 功能细分,更具体明确

    但是考虑到IOS8.0,UIWebView具有更强的兼容性。加上需求是加载一个HTMLStr+原生控件,要求不高,这里选用UIWebView。

    二.踩坑

    坑1:htmlStr没有正确拼接头

    NSString *strHTML = _textDic[@"content"];
        NSString *str = [NSString stringWithFormat:@"<html> 
    "
                           "<head> 
    "
                           "<style type="text/css"> 
    "
                           "body {font-size:15px;}
    "
                           "</style> 
    "
                           "</head> 
    "
                           "<body>"
                           "<script type='text/javascript'>"
                           "window.onload = function(){
    "
                           "var $img = document.getElementsByTagName('img');
    "
                           "for(var p in  $img){
    "
                           " $img[p].style.width = '100%%';
    "
                           "$img[p].style.height ='auto'
    "
                           "}
    "
                           "}"
                           "</script>%@"
                           "</body>"
                           "</html>",strHTML];
        [self.webView loadHTMLString:str baseURL:nil];

    头部要这样拼全,如果只拼width为屏幕宽,图片适配会出问题,导致计算UIWebView的内容实际高度会出现误差,下面有留白。

    重点是设置图片宽: " $img[p].style.width = '100%%'; " 即100%,宽为屏幕宽。

    设置图片高:"$img[p].style.height ='auto' " 即auto,高度自适应,

    当然,如果固定后台上传图片的宽高,手动计算设置width,height,也能适配。

    坑2:计算UIWebView实际内容高度不准确

    - (void)webViewDidFinishLoad:(UIWebView *)webView
    {
        webView.scrollView.scrollEnabled = NO;
        webView.scrollView.showsVerticalScrollIndicator = NO;
        webView.scrollView.showsHorizontalScrollIndicator = NO;
    
        //方法1
    //        NSString *htmlHeight = [webView stringByEvaluatingJavaScriptFromString:@"document.body.scrollHeight"];
    //        NSString *htmlWidth = [webView stringByEvaluatingJavaScriptFromString:@"document.body.scrollWidth"];
    //        float i = [htmlWidth floatValue]/[htmlHeight floatValue];
    //        float height = ScreenWidth/I;
    
    //     方法2
        CGSize fittingSize = [webView sizeThatFits:CGSizeZero];
        CGFloat height = fittingSize.height;
        _webView.frame = CGRectMake(0, 0, ScreenWidth, height);
    }

    网上有很多种计算UIWebView的方法,博主尝试过7种之多或大于7,选择比较靠谱的两种方法推荐。

    方法1:通过计算HTML内容的宽高比结合屏幕宽,算出UIWebView的内容高度。

    有个缺点,因为/,如果除不尽,所得到的高度有很小误差,如果设置UIWebView高度为计算高度,会偏小一丢丢。如果结合刷新上拉加载多次,巧合下UIWebView底部会出现一条黑线(看似黑线,其实是误差造成视觉差)

    方法2:自动适应,不改变大小,算出最优宽高,得到的高会比实际高度大,这样不会出现黑线Bug,较好适配。

    提一下 sizeToFit 和 sizeThatFits,很多初学者分不清这两者,可以这样理解。

    控件sizeToFit后,自适应,会改变控件真实宽高,通常用于求宽。

    sizeThatFits,是算出控件的最优Size,不会改变控件。这个Size你要用来做什么,就是它存在的意义了。

    坑3:如果项目需要多次上拉加载,下拉刷新新的HtmlStr,高度会出错

    真凶是UIWebView会自动缓存,多次加载新HtmlStr,由于缓存,会导致高度为上次计算高度,造成不准确。

    解决办法,在重新加载UIWebView时候,清除缓存。

       if (_webView) {
            _webView = nil;
            [self cleanCacheAndCookie];
        }
    /**清除缓存和cookie*/
    - (void)cleanCacheAndCookie{
        //清除cookies
        NSHTTPCookie *cookie;NSHTTPCookieStorage *storage = [NSHTTPCookieStorage sharedHTTPCookieStorage];
        for (cookie in [storage cookies]){[storage deleteCookie:cookie];}
        //清除UIWebView的缓存
        [[NSURLCache sharedURLCache] removeAllCachedResponses];
        NSURLCache * cache = [NSURLCache sharedURLCache];
        [cache removeAllCachedResponses];
        [cache setDiskCapacity:0];
        [cache setMemoryCapacity:0];
    }
    结语:
    网上查了很多资料,看了很多人的博客,获益很多。
    找出Bug根本原因,多去尝试,离真相就不远了。

    借鉴博文:
    1.iOS webview 清除缓存
    2.iOS网络3—UIWebView与WKWebView使用详解
    3.iOS 让HTML网页内容和图片自适应UIWebView的宽度
  • 相关阅读:
    VS2010中的单元测试
    GSM局数据制作2(Erision)
    WPF的BitmapImage的文件无法释放及内存泄露的问题
    跨库查询推荐使用的方法
    我们能做什么呢?
    长尾理论:Windows Vista
    Blackberry阻碍因素
    RIM终于想通了RIM开放新的API
    Prototype库终于有了文档了
    自己编写的MSN历史记录合并工具
  • 原文地址:https://www.cnblogs.com/zhouDongdong/p/11202979.html
Copyright © 2011-2022 走看看