iOS加载html字符串的图片适配问题 loadHTMLString: baseURL:

1、加载HTML字符串时，里面有图片标签<img的显示有时候过宽过高。下面这段js代码就是取到所有图片，给高度设置最大值。

- (void)webViewDidFinishLoad:(UIWebView *)webView{

[webView stringByEvaluatingJavaScriptFromString:
         @"var script = document.createElement('script');"
         "script.type = 'text/javascript';"
         "script.text = \"function ResizeImages() { "
         "var myimg,oldwidth;"
         "var maxwidth = 360;" // UIWebView中显示的图片宽度
         "for(i=0;i <document.images.length;i++){"
         //     "var httpP = \"http://webapi.houno.cn\"+imageArr[i].getAttribute(\"src\");"
         //     "imageArr[i].setAttribute(\"src\",httpP);"  // 遇到返回图片路径不是全路径的情况拼接，但没有成功！估计是加载先后顺序问题导致，这个方法走的时候已经加载完成。
         "myimg = document.images[i];"
         "if(myimg.width > maxwidth){"
         "oldwidth = myimg.width;"
         "myimg.width = maxwidth;"
         "}"
         "}"
         "}\";"
         "document.getElementsByTagName('head')[0].appendChild(script);"];
        [webView stringByEvaluatingJavaScriptFromString:@"ResizeImages();"];
}

但是这个方法把宽度设置了固定值，在不同机型上不能很好的展示！

2、还有一种不用考虑宽度问题的方法

- (void)webViewDidFinishLoad:(UIWebView *)webView{

        NSString *js = @"function imgAutoFit() { \
        var imgs = document.getElementsByTagName('img'); \   // 取到所有图片
       for (var i = 0; i < imgs.length; ++i) {\
        var img = imgs[i];   \
        img.style.maxWidth = %f;   \
        img.style.maxHeight = %f;    \
        } \
        }";
        js = [NSString stringWithFormat:js, [UIScreen mainScreen].bounds.size.width - 20,200];  // 设置宽高，高度可以不设置
        
        [webView stringByEvaluatingJavaScriptFromString:js];
        [webView stringByEvaluatingJavaScriptFromString:@"imgAutoFit()"];
      
}

以上这两种方法都有一个问题，当HTML标签中的图片有自带的Style标签（包括宽高的相关设置）时，加载HTML还是按照自己的style，所有还是存在过高、过宽的问题。

3、为了解决HTML中图片自带宽高属性问题，所以要在加载HTML字符串之前对字符串进行处理。

拼接图片地址成功版本：


   NSString *htmls = [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"
                               "var httpP = \"http://webapi.houno.cn\"+$img[p].getAttribute(\"src\");"
                               "$img[p].setAttribute(\"src\",httpP);"    // 这里发现拼接图片地址也能成功了。
                               "$img[p].style.width = '100%%';\n"
                               "$img[p].style.height ='auto'\n"
                               "}\n"
                               "}"
                               "</script>%@"
                               "</body>"
                               "</html>",webInfo]; // 这里的webInfo就是原始的HTML字符串。
            [self.myWebView loadHTMLString:htmls baseURL:nil];

            DLog(@"webInfo后:%@",htmls);

目前为止我遇到的问题基本解决了。

iOS加载html字符串的图片适配问题 loadHTMLString: baseURL:

推荐阅读更多精彩内容