iOS-UIWebView加载HTMLString图片显示超过屏幕宽度,导致webView可以左右滑动处的理方法

简单介绍一下使用[self.webView loadHTMLString:htmls baseURL:nil]单纯加载HTMLString的小技巧。

  • 主要解决的是当加载的HTMLString既有文字又有图片时,图片没有缩放,导致图片宽度超过屏幕宽度,使得webView整体左右都可以滑动,这样效果非常不好(见下图):
01-图片过宽导致webView可以左右滑动.gif

效果不好的代码如下:

注:以下方法是在网络请求成功回调里面调用的

// 网络请求加载的数据,进行字典转模型
NSDictionary *dict = [result objectForKey:@"data"];
HQNewsDetailModel *model = [HQNewsDetailModel mj_objectWithKeyValues:dict];
// model.details就是后台返回的HTMLString
NSString *htmlString = [NSString stringWithString:model.details];
// webView直接加载HTMLString
[self.webView loadHTMLString:htmls baseURL:nil];

经过调整以后(见下图):

02-经过调整以后的效果.gif

调整后的代码如下:

注:以下方法是在网络请求成功回调里面调用的

// 网络请求加载的数据,进行字典转模型
NSDictionary *dict = [result objectForKey:@"data"];
HQNewsDetailModel *model = [HQNewsDetailModel mj_objectWithKeyValues:dict];
    
/**
 * model.details就是后台返回的HTMLString
 * " $img[p].style.width = '100%%';\n"--->就是设置图片的宽度的
 * 100%代表正好为屏幕的宽度
 */
NSString *htmlString = [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>",model.details];
    
// webView直接加载HTMLString
[self.webView loadHTMLString:htmlString baseURL:nil];
03-关键代码描述.png

推荐阅读更多精彩内容

  • IOS之UIWebView的使用 刚接触IOS开发1年多,现在对于 混合式 移动端开发越来越流行,因为开发成本上、...
    学无止境666阅读 44,010评论 5 53
  • OS之UIWebView的使用 刚接触IOS开发1年多,现在对于 混合式 移动端开发越来越流行,因为开发成本上、速...
    知之未道阅读 1,182评论 0 4
  • 一、WebView WebView就是一个内嵌浏览器控件,在iOS中主要有两种WebView:UIWebView和...
    巧笑嫣然倩阅读 464评论 0 2
  • 中文维基的描述: 在1992年9月16日的黑色星期三,索罗斯更以放空100亿以上的英镑而声名大躁,并利用英格兰银行...
    小樓阅读 2,325评论 0 5
  • 整整一年,我陷入了一场自我批判的危机,是青年危机的具体表现形式,每个人都会有的。 青年危机,中年危机,衰老危机这是...
    鱼君阅读 70评论 0 0