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

最新推荐文章于 2019-08-08 14:23:07 发布

霜语

最新推荐文章于 2019-08-08 14:23:07 发布

阅读量2k

点赞数

分类专栏： iOS js

本文链接：https://blog.csdn.net/shuangyu1989/article/details/9996901

版权

iOS 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

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;
}

霜语

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
UIWebView的一些使用技巧(手势缩放字体、先加载文本再load图片、实现@变色的UITextView等)

1.屏蔽UIWebView的手势缩放效果这个在iOS端这边不好做，可以在返回的html头中添加一行2.UIWebView使用loadHTMLString方式加载 [_webContent loadHTMLString:htmlString baseURL:[NSURL fileURLWithPath:fileURL]];用这种方式加载webview时，html文件没有实体，所以
复制链接

扫一扫