UIWebView的一些使用技巧(手势缩放字体、先加载文本再load图片、实现@变色的UITextView等)

来源：互联网发布：数据新闻手册pdf 下载编辑：程序博客网时间：2024/05/16 04:03

1.屏蔽UIWebView的手势缩放效果

这个在iOS端这边不好做，可以在返回的html头中添加一行

<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">

2.UIWebView使用loadHTMLString方式加载

 [_webContent loadHTMLString:htmlString baseURL:[NSURL fileURLWithPath:fileURL]];

用这种方式加载webview时，html文件没有实体，所以做文件的相对引用就不好处理(例如 js、css、img)

baseURL所指向的目录可以认为是该html页面所在路径，加入其他资源文件(例如 js、css、img)都放在baseURL所指向的目录，那么在htmlString中就可以直接用文件名引用这些文件

3.UIWebView运行js

使用webview的时候，能灵活使用js能做出很多效果

例如：

3.1 给webview添加缩放手势－即时改变页面字体大小

参考1中先将webview默认的手势屏蔽掉

fontSizeScaleRate = 1.0; UIPinchGestureRecognizer *gesture = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(switchFontSize:)];    [_webContent addGestureRecognizer:gesture];    [gesture release];- (void)switchFontSize:(UIPinchGestureRecognizer *)gesture{    if (gesture.state==UIGestureRecognizerStateEnded | gesture.state==UIGestureRecognizerStateCancelled) {                NSString *js = @"";        if (gesture.scale<1.0) {            fontSizeScaleRate<=0.8?fontSizeScaleRate:(fontSizeScaleRate -= 0.1);                        js = [NSString stringWithFormat:@"document.body.style.fontSize = \"%.0f",fontSizeScaleRate*100];                    }        else {            fontSizeScaleRate>=1.2?fontSizeScaleRate:(fontSizeScaleRate += 0.1);                        js = [NSString stringWithFormat:@"document.body.style.fontSize = \"%.0f",fontSizeScaleRate*100];                    }        js = [js stringByAppendingString:@"%\";"];        [_webContent stringByEvaluatingJavaScriptFromString:js];    }   }

3.2 html页面中的图片先使用默认图片，同时loading图片，图片load完毕，替换默认图片

这个需要iOS和js结合处理，当然使用iOS的消息通知也可以做出这个，但是判断会比较麻烦，如果直接使用js就很简单，js端代码如下：

var tryTimes = 0;var maxTryTimes = 6;function replaceImageDomUseDefault () {    if (tryTimes==0) {        imageParentNodeStyleFilter();    }    if (tryTimes>=maxTryTimes) {        return;    }    var imageDoms = document.getElementsByTagName("img");    for (var i = 0; i<imageDoms.length; i++) {        var imageDom = imageDoms[i];                imageHandler(imageDom);    }    tryTimes++;    setTimeout(arguments.callee, 1000);}// 去掉图片的首行缩进function imageParentNodeStyleFilter() {        var imageDoms = document.getElementsByTagName("img");        for (var i = 0; i<imageDoms.length; i++) {        var imageDom = imageDoms[i];                if(imageDom.parentNode) {                        var parentDom = imageDom.parentNode;            parentDom.style.textIndent = 0;        }    }}function imageHandler (imageDom) {    if(isValidPic(imageDom)) {        imageDom.src = imageDom.getAttribute("_src");        return;    }}//判断img元素dom是否为合法图片function isValidPic(dom){        var img = new Image();    img.src = dom.getAttribute("_src");        if(img.width > 0 && img.height > 0){        return true;    }    return false;}

3.3使用webview做一个假的UITextView 能有多种字体颜色的

在很多评论中都有@功能，@user 需要高亮显示，当然这个习惯iOS开发的第一反应应该都是想到coretext，用webview应该更快一点(如果你不是很熟悉coretext)

实现思路大致如下：再UITextView上面覆盖一个UIWebview，将UITextView中的文本即时load到webview中，在load之前先匹配出@user 给他加一个高亮的字体样式

前提：我这里在 @user 前后各有一个空格

- (NSString *)getHTMLString:(NSString *)textFieldString{    NSString *htmlContent = @"<!DOCTYPE HTML><html><body style=\"background-color:rgb(240,240,240);word-break:break-all\" >";        NSString *filterResult = [textFieldString copy];        NSRegularExpression *regExp = [NSRegularExpression regularExpressionWithPattern:@" @[^ ]+ " options:NSRegularExpressionCaseInsensitive error:nil];    NSArray *matchs = [regExp matchesInString:textFieldString options:0 range:NSMakeRange(0, textFieldString.length)];        for (int i = 0; i<[matchs count]; i++) {                NSTextCheckingResult *match = [matchs objectAtIndex:i];        NSString *matchedString = [textFieldString substringWithRange:[match range]];        NSString *replacedString = [NSString stringWithFormat:@"<span style=\"color:rgb(73,141,203)\">%@</span>",matchedString];        filterResult = [filterResult stringByReplacingOccurrencesOfString:matchedString withString:replacedString];            }        htmlContent = [htmlContent stringByAppendingString:filterResult];        htmlContent = [htmlContent stringByAppendingString:@"</body></html>"];    return htmlContent;}