UIWebView 加载网页标签

UIWebView 加载网页标签

需求页面

需求:

后台传过来一个带网页标签的富文本字符串,其中有带图片.需要在 UI上正确显示.

传过来的字符串

标题

分析:

考虑使用UIWebView来加载带网页标签的字符串.但是由于上面还有一张图片,是独立于UIWebView的.在查看内容的时候,需要两者同时滑动.

image.png

实现

使用UIScrollView+UIWebView方式来实现.
使用UIWebView来加载带网页标签的富文本string.通过UIScrollView来解决滑动问题.

1.UIWebView加载标签

    _contentView = [[UIWebView alloc]initWithFrame:CGRectMake(10, CGRectGetMaxY(_imageView.frame), screenWidth-20, 300)];
    _contentView.delegate = self;
    _contentView.scrollView.delegate = self;
//适配当前页面宽度
    _contentView.scalesPageToFit = YES;
    _contentView.scrollView.bounces= NO;
    [_scrollView addSubview:_contentView];
//处理图片的大小
NSString *htmlStr = [self autoWebAutoImageSize:_taskStepInfoModel.taskStepIntroduction];
//加载标签文本
    [_contentView loadHTMLString:htmlStr  baseURL:nil];

这里出现个问题.就是带图片的文本,没有设置图片的大小.会导致图片显示问题
所以需要对标签文本做处理

// 自适应尺寸大小
- (NSString *)autoWebAutoImageSize:(NSString *)html{
    //搜索标签文本中的标签
    NSString * regExpStr = @"";
    NSRegularExpression *regex=[NSRegularExpression regularExpressionWithPattern:regExpStr options:NSRegularExpressionCaseInsensitive error:nil];
    
    NSArray *matches=[regex matchesInString:html
                                    options:0
                                      range:NSMakeRange(0, [html length])];
    
    
    NSMutableArray * mutArray = [NSMutableArray array];
    for (NSTextCheckingResult *match in matches) {
        NSString* group1 = [html substringWithRange:[match rangeAtIndex:1]];
        [mutArray addObject: group1];
    }
    
    NSUInteger len = [mutArray count];
    for (int i = 0; i < len; ++ i) {
        //在img标签内添加style,设置image的宽度,高度
        NSString *imageStr = [mutArray[i] stringByAppendingString:@" style=\"width:100%; height:auto;\""];
        html = [html stringByReplacingOccurrencesOfString:mutArray[i] withString:imageStr];

    }
    
    return html;
}

2. 解决UIWebView缩放问题.

首先想到的方法是我们会设置下面这个属性:

_webView.scalesPageToFit = NO;

但是通常情况下为了web可以自适应设备尺寸还是将

_webView.scalesPageToFit = YES;

这样做的同时,在webView上进行双击或捏合、放大等操作会改变页面的大小,显得比较low,为了解决这个问题可以按以下方法设置:

  1. 设置代理并遵循协议 UIScrollViewDelegate

_webView.scrollView.delegate = self;

2.添加这个方法:

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {

    return nil;

}

这样就既不影响适配,一些手势也不会改变页面的比例

3.UIWebView内容适配容器长度和scrollView的滑动范围.

#pragma mark - WebDelegate
//1.在结束的时候,设置scrollView的滑动范围
//2.获取webView内容的实际长度
-(void)webViewDidFinishLoad:(UIWebView *)webView{
// 将UIWebView的高度设为最小,然后再使用sizeThatFits就会返回刚好合适的大小
    CGSize actualSize = [webView sizeThatFits:CGSizeZero];
    CGRect newFrame = webView.frame;
    newFrame.size.height = actualSize.height;
    webView.frame = newFrame;
//设置scrollView的滑动范围.
    _scrollView.contentSize = CGSizeMake(webView.scrollView.frame.size.width, actualSize.height+200) ;

}

扩展:
1.UIWebView加载网页的时候,获取网页内容的高度的方法.

-(void)webViewDidFinishLoad:(UIWebView *)webView{
    //方法1  OC调JS方法.
    CGFloat documentWidth = [[webView stringByEvaluatingJavaScriptFromString:@"document.getElementById('content').offsetWidth"] floatValue];
    CGFloat documentHeight = [[webView stringByEvaluatingJavaScriptFromString:@"document.getElementById(\"content\").offsetHeight;"] floatValue];
    NSLog(@"documentSize = {%f, %f}", documentWidth, documentHeight);

    //方法2 通过webView.scrollView.contentSize来获取内容的高度.但是如果有调整过元素的大小,调整后的大小获取不到
    CGRect frame = webView.frame;
    webView.frame = frame;
    frame.size.width = screenWidth-20;
    frame.size.height = webView.scrollView.contentSize.height;
    NSLog(@"frame = %@", [NSValue valueWithCGRect:frame]);
    webView.frame = frame;
    _scrollView.contentSize = CGSizeMake(webView.scrollView.frame.size.width, webView.scrollView.contentSize.height) ;

//方法3  获取内容实际高度和像素的比
    NSString * clientheight_str = [webView stringByEvaluatingJavaScriptFromString: @"document.body.offsetHeight"];
    float clientheight = [clientheight_str floatValue];
    //设置到WebView上
    webView.frame = CGRectMake(0, 0, screenWidth, clientheight);
    //获取WebView最佳尺寸(点)
    CGSize frame1 = [webView sizeThatFits:webView.frame.size];
    //获取内容实际高度(像素)
    NSString * height_str= [webView stringByEvaluatingJavaScriptFromString: @"document.getElementById('webview_content_wrapper').offsetHeight + parseInt(window.getComputedStyle(document.getElementsByTagName('body')[0]).getPropertyValue('margin-top'))  + parseInt(window.getComputedStyle(document.getElementsByTagName('body')[0]).getPropertyValue('margin-bottom'))"];
    float height = [height_str floatValue];
    //内容实际高度(像素)* 点和像素的比
    height = height * frame1.height / clientheight;
    CGRect frame = webView.frame;
    webView.frame = frame;
    frame.size.width = screenWidth-20;
    frame.size.height = height;
    NSLog(@"frame = %@", [NSValue valueWithCGRect:frame]);
    webView.frame = frame;
    _scrollView.contentSize = CGSizeMake(webView.scrollView.frame.size.width, height+200) ;

//方法4 将UIWebView的高度设为最小,然后再使用sizeThatFits就会返回刚好合适的大小
    CGSize actualSize = [webView sizeThatFits:CGSizeZero];
    CGRect newFrame = webView.frame;
    newFrame.size.height = actualSize.height;
    webView.frame = newFrame;

}

WebView JS注入

如果是加载的URL,可以通过WebView的在webViewDidFinishLoad的加载完成的代理方法中,
  通过stringByEvaluatingJavaScriptFromString方法来动态添加js代码:
  NSString *injectionJSString = @"var script = document.createElement('meta');"
"script.name = 'viewport';"
"script.content=\"width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no\";"
"document.getElementsByTagName('head')[0].appendChild(script);";
[webView stringByEvaluatingJavaScriptFromString:injectionJSString];

  标签里的scale 值就是页面的初始化页面大小< initial-scale >和可伸缩放大最大< maximum-scale >和最小< minimum-scale >的的倍数。如果还有别的需求可自行设置,如果都为1表示初始化的时候显示为原来大小,可缩放的大小都为原来的大小<即不可缩放>。

/*
工程中遇到的一个问题:页面文字适应而图片没有适应,页面显示为文字在屏幕宽度之内而图片保留了网页端的大小,使webView横向容量非常大。。。
解决方式是调用JS语言,调整一下其中图片的高度,这个时机可以选择在webView的代理方法里,代码如下

*/
- (void)webViewDidFinishLoad:(UIWebView *)webView {
    NSString *js = @"function imgAutoFit() { \
    var imgs = document.getElementsByTagName('img'); \
    for (var i = 0; i < imgs.length; ++i) {\
    var img = imgs[i];   \
    img.style.maxWidth = %f;   \
    } \
    }";
    js = [NSString stringWithFormat:js, [UIScreen mainScreen].bounds.size.width - 20];
    [_webView stringByEvaluatingJavaScriptFromString:js];
    [_webView stringByEvaluatingJavaScriptFromString:@"imgAutoFit()"];
}


2.WKWebView里注入内容

在html网页端禁止缩放需在HTML里边的mata标签加入user-scalable = no,若是原生js交互的话可采用注入js的方法更改meta。
- (WKWebViewConfiguration *)webConfig
{
    if (!_webConfig) {
        _webConfig = [WKWebViewConfiguration new];
        WKUserContentController *userController = [WKUserContentController new];
        NSString *js = @" $('meta[name=description]').remove(); $('head').append( '' );";
        WKUserScript *script = [[WKUserScript alloc] initWithSource:js injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:NO];
        [userController addUserScript:script];
        [userController addScriptMessageHandler:self name:@"openInfo"];
        _webConfig.userContentController = userController;
    }
    return _webConfig;
}

你可能感兴趣的:(UIWebView 加载网页标签)