UIWebView 加载网页标签
需求页面
需求:
后台传过来一个带网页标签的富文本字符串,其中有带图片.需要在 UI上正确显示.
传过来的字符串
<p> 标题</p> <p> <img src="http://200.200.200.58:8981/group2/M00/11/FD/yMjIOluM9L2AHtlwAAg5JOz_tp4013.jpg" alt="" /> </p>
分析:
考虑使用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{
//搜索标签文本中的<img>标签
NSString * regExpStr = @"<img(.*?)/>";
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,为了解决这个问题可以按以下方法设置：
- 设置代理并遵循协议 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( '<meta name=\"viewport\" content=\"width=device-width, initial-scale=1,user-scalable=no\">' );";
WKUserScript *script = [[WKUserScript alloc] initWithSource:js injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:NO];
[userController addUserScript:script];
[userController addScriptMessageHandler:self name:@"openInfo"];
_webConfig.userContentController = userController;
}
return _webConfig;
}
