UIWebView添加图片点击事件、调整字体大小与高度自适应的解决方法

南宫龙野
2023-12-01

近来项目中需要用到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;

 



 类似资料: