ImageAutoFitInWebView

结合JS解决用webVIew加载图片时图片自动适配屏幕的问题

1、在标哥的博客中WebView图片自适应屏幕中，标哥提供了一种解决方案，然后我就试验了一下。

- (void)viewDidLoad {
    [super viewDidLoad];
    
//  设置webView
    UIWebView *webView=[[UIWebView alloc]initWithFrame:self.view.bounds];
  
//  1、本地html资源测试
//  NSString *path=[[NSBundle mainBundle]pathForResource:@"test" ofType:@"html"];
//  [webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:path]]];
    
//  2、URL网址资源测试
    [webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://gb.wallpapersking.com/top/class108/15041/14eec4d8b4bf1fe0.htm"]]];
    
    [self.view addSubview:webView];
    webView.delegate=self;
}

- (void)webViewDidFinishLoad:(UIWebView *)webView {
  // 1、只对本地html资源的图片有效果
  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()"];
}

2、结论就在上述代码中：只对本地的html资源有效，我换了一个图片网站的URL地址，就没用了。

但是很明显解决思路就是标哥文章中所述，问题在哪里？可能还是在JS代码规范方面吧。

3、百度了一下，做了如下修改。测试结果如下所述：都有效果。

- (void)webViewDidFinishLoad:(UIWebView *)webView {
//    2、都有效果
    NSString *js=@"var script = document.createElement('script');"
    "script.type = 'text/javascript';"
    "script.text = \"function ResizeImages() { "
    "var myimg,oldwidth;"
    "var maxwidth = %f;"
    "for(i=0;i <document.images.length;i++){"
    "myimg = document.images[i];"
    "if(myimg.width > maxwidth){"
    "oldwidth = myimg.width;"
    "myimg.width = %f;"
    "}"
    "}"
    "}\";"
    "document.getElementsByTagName('head')[0].appendChild(script);";
    js=[NSString stringWithFormat:js,[UIScreen mainScreen].bounds.size.width,[UIScreen mainScreen].bounds.size.width-15];
    [webView stringByEvaluatingJavaScriptFromString:js];
    [webView stringByEvaluatingJavaScriptFromString:@"ResizeImages();"];
    
}

4、备注

• 自己用Django写了个大图片排版的html，然后在本地部署起来，用http://127.0.0.1:8000 访问来测试。但是上传上来比较提供给其他人测试时就比较麻烦，不是所有人都安装了Django环境。
• 所以我就用了标哥的文件test.html，感谢标哥，哈哈。