近来项目中需要用到UIWebView来解决图文混排的问题(吐槽一些主管竟然想到用UIWebView来做图文混排,不过为了和安卓那边统一,时间也比较赶,看了看内存占用还能忍受,我也就没去想其他方式了,等闲下来再去好好研究一下图文混排),之前没怎么用过UIWebView,使用起来不是很顺手,效果不是很好,网上资料也很难找,整理了一下,希望能帮到有需要的人(同时也防止自己遗忘~)。
废话不多说,进入正题:
1.UIWebView中的图片添加点击事件(可用来看大图什么的):
//获取txt文件路径
NSString *txtPath = [[NSBundle mainBundle] pathForResource:@"ImageClickJS" ofType:nil];
//将txt到string对象中,编码类型为NSUTF8StringEncoding
NSString *jsString = [[NSString alloc] initWithContentsOfFile:txtPath encoding:NSUTF8StringEncoding error:nil];
[self.webView loadHTMLString:content baseURL:nil];
ImageClickJS这个文档就是JS的内容啦:如下(直接复制进文档拖到项目中就好)
<pre name="code" class="javascript"> //setImage的作用是为页面的中img元素添加onClick事件,即设置点击时调用imageClick
function setImage(){ var imgs = document.getElementsByTagName("img");for (var i=0;i<imgs.length;i++){var src = imgs[i].src;imgs[i].setAttribute("onClick","imageClick(src)");}document.location = imageurls;}
//imageClick即图片 onClick时触发的方法,document.location = url;的作用是使调用 //webView: shouldStartLoadWithRequest: navigationType:方法,在该方法中我们真正处理图片的点击 function imageClick(imagesrc){var url="imageClick:"+imagesrc;document.location = url;}</span>
弄好之后一定要在- (void)webViewDidFinishLoad:(UIWebView *) webView方法里添加如下代码:
[webView stringByEvaluatingJavaScriptFromString:@"setImage()"];
最后,使用webview的代理方法:- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType 在里面进行判定即可,完整代码如下:
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
NSString *requestString = [[request URL] absoluteString];
NSArray *components = [requestString componentsSeparatedByString:@":"];
if ([components count] >= 1) {
//判断是不是图片点击
if ([(NSString *)[components objectAtIndex:0]isEqualToString:@"imageclick"]) {
<span style="white-space:pre"> </span>//在这里写入要进行的操作
return NO;
}
return YES;
}
return YES;
}
2.调整UIWebView的文字大小
在- (void)webViewDidFinishLoad:(UIWebView *) webView方法里添加如下代码:
[webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '250%'"];//250%这个数值根据自己的需求进行修改。
3.调整UIWebView的高度适应文字变大后的效果
为了解决这个问题找了近2天,一开始搜到的方法是在- (void)webViewDidFinishLoad:(UIWebView *) webView方法里添加如下代码:
CGSize actualSize = [webView sizeThatFits:CGSizeZero];
CGRect newFrame = webView.frame;
newFrame.size.height =actualSize.height;
webView.frame = newFrame;
这方法在没有改变webview的字体大小的时候还是使用正常的,但是你在改了字体大小之后是没有效果的,webview的高度还是原来没有改字体时候的高度。
所以,这个时候就要用到webView.scrollView的了,把 newFrame.size.height = webView.scrollView.contentSize.height即可!故为方便起见,还是一直用webview的scrollview的contentsize来设置webview的高度比较好。所以,调整后的代码应该是这样:
[webView stringByEvaluatingJavaScriptFromString:@"document.body.scrollHeight;"];CGRect newFrame = webView.frame; newFrame.size.height = webView.scrollView.contentSize.height;webView.frame = newFrame;