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

ios UIWebView加载HTMLStr图文,关于图片宽高设置,webView内容实际高度的踩坑问题,第1张

概述一.关于UIWebView 与 WKWebView 选取问题 从发布时间看: 2008年7月11日,在新一代iPhone3G正式发售当天,iPhone OS 2.0(iOS 2.0)推出,这时候就有UIWebView了。 WKWebView是IOS 8.0推出,2014年9月份。新出的WKWebView是对老UIWebView的优化与升级。 WKWebView对比UIWebView主要优势: 更多 一.关于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(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的宽度
总结

以上是内存溢出为你收集整理的ios UIWebView加载HTMLStr图文,关于图片宽高设置,webView内容实际高度的踩坑问题全部内容,希望文章能够帮你解决ios UIWebView加载HTMLStr图文,关于图片宽高设置,webView内容实际高度的踩坑问题所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/1031030.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-23
下一篇 2022-05-23

发表评论

登录后才能评论

评论列表(0条)

保存