美文网首页收藏ios
iOS加载html字符串的图片适配问题 loadHTMLStri

iOS加载html字符串的图片适配问题 loadHTMLStri

作者: 何年何月 | 来源:发表于2016-10-09 15:07 被阅读5387次

    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);
    

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

    相关参考:只记得这一个啦!

    http://blog.csdn.net/wenmingzheng/article/details/50493658?utm_source=itdadao&utm_medium=referral

    相关文章

      网友评论

        本文标题:iOS加载html字符串的图片适配问题 loadHTMLStri

        本文链接:https://www.haomeiwen.com/subject/vvgpyttx.html