一.关于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> \n"

                       "<head> \n"

                       "<style type=\"text/css\"> \n"

                       "body {font-size:15px;}\n"

                       "</style> \n"

                       "</head> \n"

                       "<body>"

                       "<script type='text/javascript'>"

                       "window.onload = function(){\n"

                       "var $img = document.getElementsByTagName('img');\n"

                       "for(var p in  $img){\n"

                       " $img[p].style.width = '100%%';\n"

                       "$img[p].style.height ='auto'\n"

                       "}\n"

                       "}"

                       "</script>%@"

                       "</body>"

                       "</html>",strHTML];

    [self.webView loadHTMLString:str baseURL:nil];

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

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

设置图片高："$img[p].style.height ='auto'\n" 即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(, , 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:];

    [cache setMemoryCapacity:];

}
结语：
网上查了很多资料，看了很多人的博客，获益很多。
找出Bug根本原因，多去尝试，离真相就不远了。

借鉴博文：
1.iOS webview 清除缓存
2.iOS网络3—UIWebView与WKWebView使用详解
3.iOS 让HTML网页内容和图片自适应UIWebView的宽度

ios UIWebView加载HTMLStr图文，关于图片宽高设置，webView内容实际高度的踩坑问题的更多相关文章

  1. android中加载的html获取的宽高不正确

    wap页面使用 js库是zepto,按照惯例在$(function(){})中,来获取当前可视区的宽高,但得到的宽高却与预想的相差十万八千里. 原本android手机的浏览器设定的宽高基本是360*6 ...

  2. IOS UIwebView 加载网络图片 使用相对地址

    方法一: 在html文件内直接使用file:///user//xx//image.png的绝对路径 注:这样可以显示图片,但是如果在程序目录修改,图片就不能显示 方法二: 在html使用占位符,如:在 ...

  3. iOS UIWebView 加载进度条的使用-WKWebView的使用，更新2017.6.26

    1.由于项目中加载网络插件,直接使用了webview加载.使用了三方NJKWebViewProgress进度条的使用,近期在测试时发现,网络缓慢时出现白屏,有卡顿现象. 于是采用了WKWebView进 ...

  4. 关于iOS UIWebView 加载网页，点击网页内某些控件导致 Application 'UIKitApplication:xxx.xxx.xxx' was killed by jetsam.

    问题:公司用的腾讯问卷系统,内嵌在我们应用或游戏的自定义UIWebView里面展示,发现在iOS 10 以下系统,点击圆形勾选框 会大概率出现闪退. 通过联调发现:报了这样一个警告Applicatio ...

  5. iOS UIWebView加载时添加进度条

    标注:此框架仅适合UIWebView  对iOS8后新出的WKWebView不适用,当然,你可以尝试修改框架里的几个代理方法. 框架是:NJKWebViewProgress 导入头文件 #import ...

  6. iOS UIWebView加载时添加进度条01

    标注:此框架仅适合UIWebView  对iOS8后新出的WKWebView不适用,当然,你可以尝试修改框架里的几个代理方法. 框架是:NJKWebViewProgress 导入头文件 #import ...

  7. 简易仿ios菊花加载loading图

    原文链接:https://mp.weixin.qq.com/s/wBbQgOfr59wntNK9ZJ5iRw 项目中经常会用到加载数据的loading显示图,除了设计根据app自身设计的动画loadi ...

  8. iOS网络加载图片缓存策略之ASIDownloadCache缓存优化

    iOS网络加载图片缓存策略之ASIDownloadCache缓存优化   在我们实际工程中,很多情况需要从网络上加载图片,然后将图片在imageview中显示出来,但每次都要从网络上请求,会严重影响用 ...

  9. iOS开发-UIWebView加载本地和网络数据

    UIWebView是内置的浏览器控件,可以用它来浏览网页.打开文档,关于浏览网页榜样可以参考UC,手机必备浏览器,至于文档浏览的手机很多图书阅读软件,UIWebView是一个混合体,具体的功能控件内置 ...

随机推荐

  1. CityMaker SDK与三维GIS城市

    https://wenku.baidu.com/view/abc2a32f01f69e3142329426.html https://blog.csdn.net/weixin_38476447/art ...

  2. java.lang.OutOfMemoryError：GC overhead limit exceeded解决方

    Tomcat异常信息: Exception in thread "main" java.lang.OutOfMemoryError: GC overhead limit excee ...

  3. php WebSocket 简单实现demo

    WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据. 在 ...

  4. win10+VS2015+opencv3.4.0配置方法

    win10+VS2015+opencv3.4.0配置方法 操作环境: windows10 64位opencv 3.4.0:https://opencv.org/releases.html(选择open ...

  5. 【洛谷P5018 对称二叉树】

    话说这图也太大了吧 这题十分的简单,我们可以用两个指针指向左右两个对称的东西,然后比较就行了 复杂度O(n*logn) #include<bits/stdc++.h> using name ...

  6. selenium启动firefox打开导入向导问题解决

    操作系统:win8-64位 火狐版本:40.0.2 问题描述:selenium启动firefox时,每次启动都提示我导入其他浏览器的页签,如下图所示 解决方法一: 到firefox的profiles. ...

  7. 阶段1 语言基础+高级_1-3-Java语言高级_1-常用API_1_第6节 static静态_15_静态代码块

    static的特殊用法, 静态代码块 加上构造方法,做测试 又创建一个对象 静态代码块 只执行一次 后续在学习jdbc的时候,静态代码块很有用途.

  8. AWK之随心所欲-高手篇

    1.内置变量 变量名 描述 FS 输入字段分隔符,默认是空格或制表符 OFS 输出字段分隔符,默认是空格 RS 输入记录分隔符,默认是换行符\n ORS 输出记录分隔符,默认是换行符\n NF 统计当 ...

  9. VUE 全局监听sessionStorage变化

    在做项目的时候,可能需要在其他模块获取推送的信息或者变量,但是数据量或者说数目少,而且项目中也没有引用VUEX,那么可以下手的方法之一也就是sessionStorage类的浏览器存储了. 首先在全局的 ...

  10. R语言平均值，中位数和众数

    R语言平均值,中位数和众数 R中的统计分析通过使用许多内置函数来执行的.这些函数大部分是R基础包的一部分.这些函数将R向量与参数一起作为输入,并在执行计算后给出结果. 我们在本章中讨论的是如何求平均值 ...