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