一直觉得自己写的不是技术，而是情怀，一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的，希望我的这条路能让你们少走弯路，希望我能帮你们抹去知识的蒙尘，希望我能帮你们理清知识的脉络，希望未来技术之巅上有你们也有我。

今天遇到一个非常让人家讨厌的BUG,想了好久都解决不了，因为没有办法调试js的代码，OC调用JS全是字符串，没有办法断点调试。后来需要前端网页的同事来帮忙都调试了好久。

先说说这个BUG吧，需求是做咨询详情，由于html加载出来的图片在电脑网页是很大张的，在手机屏幕上面看到是太大张了。所以ios需要对图片的宽高进行重新设置。于是我就写了下面的代码

//自适应图片
NSString *jstring=@"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);";
jstring = [NSString stringWithFormat:jstring,[UIScreen mainScreen].bounds.size.width,[UIScreen mainScreen].bounds.size.width-15];
[webView evaluateJavaScript:jstring completionHandler:nil];
[webView evaluateJavaScript:@"ResizeImages();"completionHandler:nil];

写了之后会出现一个问题的。

1.gif

上面的图片显示没有问题，下面的图片有问题。然后我把获取回来的html内容打印出来这两张图片设置样式的区别。

<p><img src="https://www.lukeinfo.com/uploads/reprinted/sp/20210205/50086aspect-KdKPs6F2CR-700xauto.jpg" /></p>

<p><img height="365" src="https://www.lukeinfo.com/uploads/reprinted/sp/20210205/50088aspect-s4iLF8cKRM-700xauto.jpg" width="700" /></p>

上面的图片是没有设置高度的，所以执行oc调用js代码的时候，图片设置高屏幕的宽度之后，高度是自适应的。
下面的图片由于写死了 height="365" 所以没法自适应，造成图片变形。于是我就加多一句代码，计算高度的比例

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

全部代码就是下面的样子

//自适应图片
NSString *jstring=@"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;"
           "myimg.height = myimg.height*maxwidth/oldwidth;"
        "}"
    "}"
"}\";"
"document.getElementsByTagName('head')[0].appendChild(script);";
jstring = [NSString stringWithFormat:jstring,[UIScreen mainScreen].bounds.size.width,[UIScreen mainScreen].bounds.size.width-15];
[webView evaluateJavaScript:jstring completionHandler:nil];
[webView evaluateJavaScript:@"ResizeImages();"completionHandler:nil];

然后又出现问题，现在变成上面变形，下面正常啦。

WechatIMG254.jpeg

造成这个的原因就是，由于上面是没有设置宽高的样式的，造成无法准确计算图片的高度，下面设置的宽高可以用比例来计算实际的宽高。

最后搞了好久。然后把所有图片标签设置高度的设置为自适应，全部代码就在下面

 "myimg.style.height = 'auto';"

//自适应图片
NSString *jstring=@"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;"
           "myimg.style.height = 'auto';"
        "}"
    "}"
"}\";"
"document.getElementsByTagName('head')[0].appendChild(script);";
jstring = [NSString stringWithFormat:jstring,[UIScreen mainScreen].bounds.size.width,[UIScreen mainScreen].bounds.size.width-15];
[webView evaluateJavaScript:jstring completionHandler:nil];
[webView evaluateJavaScript:@"ResizeImages();"completionHandler:nil];

大功告成