UIWebView加载html 图片大小自适应的方法汇总

时间 2019-12-09

标签 uiwebview 加载 html 图片大小自适应方法汇总栏目 HTML 繁體版

原文原文链接

方法一

处理HTMLString的方法：

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"
                              " $img[p].style.width = '100%%';\n"
                               "$img[p].style.height ='auto'\n"
                           "}\n"
                           "}"
                           "</script>%@"
                           "</body>"
                           "</html>",htmlString];

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

处理HTMLString的原理：

原理就是用一个for循环，拿到全部的图片，对每一个图片都处理一次，让图片的宽为100%，就是按照屏幕宽度自适应；让图片的高atuo，自动适应。文字的字体大小，能够去改font-size:15px，这里我用的是15px。根据本身的具体需求去改吧。javascript

方法二

[webView stringByEvaluatingJavaScriptFromString:css

@"var script = document.createElement('script');"html

"script.type = 'text/javascript';"java

"script.text = \"function ResizeImages() { "web

"var myimg,oldwidth;"app

"var maxwidth=300;" //缩放系数改变参数控制图片缩放大小字体

"for(i=0;i <document.images.length;i++){"lua

"myimg = document.images[i];"spa

"if(myimg.width > maxwidth){"code

"oldwidth = myimg.width;"

"myimg.width = maxwidth;"

"myimg.height = myimg.height * (maxwidth/oldwidth);"

"}"

"}\";"

"document.getElementsByTagName('head')[0].appendChild(script);"];

[webView stringByEvaluatingJavaScriptFromString:@"ResizeImages();"];

方法三

- (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; \

} \

}";

js = [NSString stringWithFormat:js, [UIScreen mainScreen].bounds.size.width - 20];

[webView stringByEvaluatingJavaScriptFromString:js];

[webView stringByEvaluatingJavaScriptFromString:@"imgAutoFit()"];

}

咱们这里获取了屏幕的宽度，而后设置成图片的最大宽度为屏幕的宽度-20。(此方法没有实践过，详情参考 http://www.henishuo.com/webview-img-auto-fit/)