UIWebView加载富文本的一些问题

需求:tableViewCell嵌套webView通过webView加载后台返回的html富文本代码,展示
  • 坑1:补全html代码,通过js代码动态计算内容高度返回刷新cell高度
  • 坑2:图片适配屏幕宽度,而不会让字体变小
  • 坑3:计算缓存每个cell的高度,且避免回调导致的tableView无限reload

  • so-1:在返回的代码首尾部补全标签<htlm><body>...</body></html>,在webView的回调方法finishLoad方法中用js代码document.body.offsetHeight或者用webView.scrollView.contentOffset计算webView高度
  • so-2: 方案1:webView默认会按照文本图片大小去显示而可能导致会能垂直或者水平滚动来完整显示图片,可以用自带的sizePage属性来设置适配图片大小至屏幕大小,但是此属性会导致富文本中的文字大小也缩小严重,为解决文字问题,还是不能直接使用该属性,也只能再次使用js去改变内容中图片的适配 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();"];遍历dom中所有图片,调用图片的ResizeImages方法,设置最大宽度为屏幕宽度即可 方案2:将html中包含的image标签全部设置为行内样式和max宽度. htmlStr = [htmlStr stringByReplacingOccurrencesOfString:@"<img" withString:@"<img style=\"display: ;max-width:100%;\""];但是该方案可能会与图标本身样式冲突,适用于image本身无样式的情况
  • so-3:cell中计算webView的高度,回调后用一个cache去缓存,setModel之前先判断cache中是否有值,若有值则设置cell的代理为nil而不再调用webView的回调计算高度