iOS中加载HTML数据，并点击图片或链接进行相应的操作

开发中，有时候我们需要展现HTML类型的数据，这时候，我们多数选择用UIWebView加载，但是当我们需要加载大量的HTML数据时，使用UIWebView加载，性能会降低，尤其是当UITableViewCell需要放大量的HTML数据时，如果你用UIWebView加载这些HTML数据，你会发现，tableview会有卡顿的现象。

那怎样去优化这个卡顿现象呢？我们知道WKWbebView的加载速度比UIWebView提升差不多一倍的, 内存使用上面,反而还少了一半，所以我们可以采用WKWebView对其进行优化。今天把一个三方类介绍给大家，那就是IMYWebView,这个类兼容WKWebView和UIWebView，实现了UIWebView到WKWebView的对接，即使你之前的项目是用的UIWebView,那也没关系，只要将UIWebView换成IMYWebView就可以了。

另外，加载HTML数据自然绝多数会有图片和内置链接，我们也会希望可以点击图片进行浏览、放大和缩小，可以点开链接，那么，该怎样去实现呢？

1、在工程中导入IMYWebView

#import "IMYWebView.h"

2、创建IMYWebView,并嵌套到TableView中，实现tableview的相关代理方法

@interface ViewController ()<UITableViewDataSource, UITableViewDelegate,IMYWebViewDelegate,HZPhotoBrowserDelegate>
@property(nonatomic, strong)UITableView *tableView;
@property(nonatomic, assign)CGFloat webviewHight;//记录webview的高度
@property(nonatomic, copy)NSString *HTMLData;//需要加载的HTML数据
@property(nonatomic, strong)NSMutableArray *imageArray;//HTML中的图片个数
@property(nonatomic, strong)IMYWebView *IMYwebView;
 
@end

- (void)viewDidLoad {
    [super viewDidLoad];
    self.navigationController.navigationBar.translucent = NO;
    self.title = @"tableviewcell嵌套webview载HTML";
    self.view.backgroundColor = [UIColor whiteColor];
//    获取HTML数据
     [self getHTMLData];
    
    _tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width , self.view.frame.size.height - 64) style:UITableViewStylePlain];
    _tableView.dataSource = self;
    _tableView.delegate = self;
    
    _tableView.tableHeaderView = [[UIView alloc] init];
    [self.view addSubview:_tableView];
    _htmlWebView = [[IMYWebView alloc] init];
    _htmlWebView.frame = CGRectMake(0, 0, _tableView.frame.size.width, 1);
    _htmlWebView.delegate = self;
    _htmlWebView.scrollView.scrollEnabled = NO;//设置webview不可滚动，让tableview本身滚动即可
    _htmlWebView.scrollView.bounces = NO;
    _htmlWebView.opaque = NO;
    
}

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return 4;
}

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    if (indexPath.row != 3) {
         return 60;
    }else{
        
        return _webviewHight;//cell自适应webview的高度
    }
   
}

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    static NSString *identifier = @"cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];

    if (!cell) {
            cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identifier];
            
                }
    if (indexPath.row == 3) {
        
        [cell.contentView addSubview:_htmlWebView];

        //加载HTML数据
        [_htmlWebView loadHTMLString:_HTMLData baseURL:nil];
        
    }else{
        
        cell.textLabel.text = [NSString stringWithFormat:@"第%ld行",(long)indexPath.row];
      
    }
     return cell;
}

3、实现IMYWebView的相关代理方法

-(void)webViewDidFinishLoad:(IMYWebView *)webView{
//加载完毕后重新计算webview的高度
    [self.htmlWebView evaluateJavaScript:@"document.documentElement.scrollHeight" completionHandler:^(id object, NSError *error) {
        CGFloat height = [object integerValue];
        
        if (error != nil) {
            
        }else{
            _webviewHight = height;
            [_tableView beginUpdates];
            self.htmlWebView.frame = CGRectMake(_htmlWebView.frame.origin.x,_htmlWebView.frame.origin.y, _tableView.frame.size.width, _webviewHight );
              [_tableView endUpdates];
        }
  
    }];
    
//    插入js代码，对图片进行点击操作
    [webView evaluateJavaScript:@"function assignImageClickAction(){var imgs=document.getElementsByTagName('img');var length=imgs.length;for(var i=0; i < length;i++){img=imgs[i];if(\\"ad\\" ==img.getAttribute(\\"flag\\")){var parent = this.parentNode;if(parent.nodeName.toLowerCase() != \\"a\\")return;}img.onclick=function(){window.location.href='image-preview:'+this.src}}}" completionHandler:^(id object, NSError *error) {
        
    }];
    [webView evaluateJavaScript:@"assignImageClickAction();" completionHandler:^(id object, NSError *error) {
        
    }];

    //获取HTML中的图片
    [self getImgs];
 

}

-(BOOL)webView:(IMYWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
    
    if ([request.URL isEqual:@"about:blank"])
    {
        return true;
    }
    if ([request.URL.scheme isEqualToString: @"image-preview"])
    {
        
        NSString *url = [request.URL.absoluteString substringFromIndex:14];
        
        
        //启动图片浏览器， 跳转到图片浏览页面
        if (_imageArray.count != 0) {
            
            HZPhotoBrowser *browserVc = [[HZPhotoBrowser alloc] init];
            browserVc.imageCount = self.imageArray.count; // 图片总数
            browserVc.currentImageIndex = [_imageArray indexOfObject:url];//当前点击的图片
            browserVc.delegate = self;
            [browserVc show];
            
        }
        return NO;
        
    }
    
    //    用户点击文章详情中的链接
    if ( navigationType == UIWebViewNavigationTypeLinkClicked ) {
        
            WebViewURLViewController *webViewVC = [WebViewURLViewController new];
            webViewVC.URLString = request.URL.absoluteString;
            [self.navigationController pushViewController:webViewVC animated:YES];
        
        
        return NO;
    }
        
        return YES;
}

4、获取文章图片个数的方法

#pragma mark -- 获取文章中的图片个数
- (NSArray *)getImgs
{
   
    NSMutableArray *arrImgURL = [[NSMutableArray alloc] init];
    for (int i = 0; i < [self nodeCountOfTag:@"img"]; i++) {
        NSString *jsString = [NSString stringWithFormat:@"document.getElementsByTagName('img')[%d].src", i];
        [_htmlWebView evaluateJavaScript:jsString completionHandler:^(NSString *str, NSError *error) {
            
            if (error ==nil) {
                [arrImgURL addObject:str];
            }
       
        }];
    }
    _imageArray = [NSMutableArray arrayWithArray:arrImgURL];
    
    
    return arrImgURL;
}

// 获取某个标签的结点个数
- (NSInteger)nodeCountOfTag:(NSString *)tag
{
    
    NSString *jsString = [NSString stringWithFormat:@"document.getElementsByTagName('%@').length", tag];
 
   int count =  [[_htmlWebView stringByEvaluatingJavaScriptFromString:jsString] intValue];
    
    return count;
}

5、点击图片进行浏览的相关方法，这个图片浏览是封装好的一个浏览器，在这里暂时不做介绍

#pragma mark - photobrowser代理方法
- (UIImage *)photoBrowser:(HZPhotoBrowser *)browser placeholderImageForIndex:(NSInteger)index
{
    //图片浏览时，未加载出图片的占位图
    return [UIImage imageNamed:@"gg_pic@2x"];
    
}

- (NSURL *)photoBrowser:(HZPhotoBrowser *)browser highQualityImageURLForIndex:(NSInteger)index
{
    NSString *urlStr = [self.imageArray[index] stringByReplacingOccurrencesOfString:@"thumbnail" withString:@"bmiddle"];
   

6、最后的运行结果如图：

7.有时候我们需要给webview加个头视图或者尾视图，跟随webview一起滚动，如果这时我们的webview不是嵌在tableview中的，那该怎么办呢？很简单，只要将头视图加在webview的scrollview上，设置scrollview的contentInset(UIEdgeInsetsMake(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right)头视图的高度为top，尾视图的高度为bottom,根据自己的需要去设置相应的高度)就可以了

    //给scrollview添加头视图
    //设置web view的scrollView的上、左、下、右的距离
    _wkwebView.scrollView.contentInset = UIEdgeInsetsMake(40, 0, 0, 0);
    _titleLabel = [[UILabel alloc] init];
    [_wkwebView.scrollView addSubview:_titleLabel];
    _titleLabel.frame = CGRectMake(0, -40, self.wkwebView.frame.size.width, 40);
    [self.wkwebView.scrollView addSubview:_titleLabel];
  _titleLabel.text = @"web view的头视图";

8、最后，给大家分享一些用js获取网页一些相关元素的代码

document：属性

document.title                 //设置文档标题等价于HTML的<title>标签
document.bgColor               //设置页面背景色
document.fgColor               //设置前景色(文本颜色)
document.linkColor             //未点击过的链接颜色
document.alinkColor            //激活链接(焦点在此链接上)的颜色
document.vlinkColor            //已点击过的链接颜色
document.URL                   //设置URL属性从而在同一窗口打开另一网页
document.fileCreatedDate       //文件建立日期，只读属性
document.fileModifiedDate      //文件修改日期，只读属性
document.fileSize              //文件大小，只读属性
document.cookie                //设置和读出cookie
document.charset               //设置字符集 简体中文:gb2312


document：方法
document.write()                      //动态向页面写入内容
document_createElement_x_x(Tag)           //创建一个html标签对象
document.getElementByIdx_x_x(ID)           //获得指定ID值的对象
document.getElementsByName(Name)      //获得指定Name值的对象
document.body.a(oTag)


body：子对象

document.body                   //指定文档主体的开始和结束等价于<body></body>
document.body.bgColor           //设置或获取对象后面的背景颜色
document.body.link              //未点击过的链接颜色
document.body.alink             //激活链接(焦点在此链接上)的颜色
document.body.vlink             //已点击过的链接颜色
document.body.text              //文本色
document.body.innerText         //设置<body>...</body>之间的文本
document.body.innerHTML         //设置<body>...</body>之间的HTML代码
document.body.topMargin         //页面上边距
document.body.leftMargin        //页面左边距
document.body.rightMargin       //页面右边距
document.body.bottomMargin      //页面下边距
document.body.background        //背景图片
document.body.a(oTag) //动态生成一个HTML对象

location：子对象
document.location.hash          // #号后的部分
document.location.host          // 域名+端口号
document.location.hostname      // 域名
document.location.href          // 完整URL
document.location.pathname      // 目录部分
document.location.port          // 端口号
document.location.protocol      // 网络协议(http:)
document.location.search        // ?号后的部分

常用对象事件:
documeny.location.reload()          //刷新网页
document.location.reload(URL)       //打开新的网页
document.location.assign(URL)       //打开新的网页
document.location.replace(URL)      //打开新的网页

selection-选区子对象
document.selection

demo地址