WKWebView 在 tableview 上的展示

创建 WKWebView

        _webView = [[WKWebView alloc]initWithFrame:self.view.bounds];
        _webHeight = _webView.height;
        _webView.backgroundColor = [UIColor whiteColor];
        _webView.UIDelegate = self;
        _webView.navigationDelegate = self;
        _webView.scrollView.bounces = NO;
        _webView.scrollView.scrollEnabled = NO;
        _webView.scrollView.showsHorizontalScrollIndicator = NO;
        _webView.scrollView.delegate = self;

WKWebView加载 html 数据：

NSString *result = [NSString stringWithFormat:@"<img style='display: block; max-width: %.0f'",kScreenWidth];
        id courseData = self.object;
        NSAttributedString *priceStr = [ECFormatHelper attributedStringForPromotionPrice:[courseData valueForKey:@"price"] decimal:2 smallFontSize:16];
        NSString *subtitle = [CYDataHelper isNull:[courseData valueForKey:@"subtitle"]]?@"还没有设置课程简介":[courseData valueForKey:@"subtitle"];
          NSString *title = [CYDataHelper isNull:[courseData valueForKey:@"title"]]?@"还没有设置课程标题":[courseData valueForKey:@"title"];
        NSString *teacher = [CYDataHelper isNull:[courseData valueForKey:@"teacher"]]?@"暂无":[courseData valueForKey:@"teacher"];


        NSDictionary *dict = @{@"title":title,@"subtitle": subtitle,@"num":@([[courseData valueForKey:@"num"]integerValue]),@"expiryDay":@([[courseData valueForKey:@"expiryDay"]integerValue]),@"teacher":teacher};
        // 这里判断 数据 空值的情况 <null>
        NSString *header = @"<head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"/><meta  name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0\"/><meta name=\"apple-mobile-web-app-capable\" content=\"yes\"><meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black\"><link rel=\"stylesheet\" type=\"text/css\" /><style type=\"text/css\"> </style></head>";

        NSString *cssStr = [NSString stringWithFormat:@"<html>%@<body>",header];
        // 课程详情
        NSString *content = [NSString stringWithFormat:@"%@%@%@%@",
                             [CYDataHelper isNull:[courseData valueForKey:@"about"]]?@"":[courseData valueForKey:@"about"],
                             [CYDataHelper isNull:[courseData valueForKey:@"audiences"]]?@"":[courseData valueForKey:@"audiences"] ,
                             [CYDataHelper isNull:[courseData valueForKey:@"goals"]]?@"":[courseData valueForKey:@"goals"],
                             [CYDataHelper isNull:[courseData valueForKey:@"teacherInfo"]]?@"":[courseData valueForKey:@"teacherInfo"]
                             ];
        if (content.length > 0) {
            content = [NSString stringWithFormat:@"%@%@",@"<div style=\"color: #454545; font-size: 18px; font:Arial;\">内容简介</div>",content];

        }
        // 把里面的图片标签遍历替换
        content = [content stringByReplacingOccurrencesOfString:@"<img" withString:result];
        NSString *detailHtml = [NSString stringWithFormat:@"%@%@%@",cssStr,
                               content,@"</body></html>"];
        [_dataSource addObjectsFromArray:@[priceStr,dict,detailHtml]];

        [self.webView loadHTMLString:detailHtml baseURL:nil];

WKWebView代理方法：

#pragma mark  ---  WKNavigationDelegate  ---
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation
{

    [_webView  evaluateJavaScript:@"document.body.offsetHeight"  completionHandler:^(id  _Nullable  result,  NSError  *  _Nullable  error)  {
        //  加20像素是为了预留出边缘
        CGFloat height = [result  doubleValue] + 20;
        //  设置一个高度属性，赋值后便于设置cell的高度
        _webHeight = MAX(self.webView.height, height);
        //  设置cell上子视图的frame，主要是高度
        _webView.frame = CGRectMake(0, 0, kScreenWidth, _webHeight);
        _scrollView.frame = CGRectMake(0, 0, kScreenWidth, height);
        _scrollView.contentSize = CGSizeMake(kScreenWidth, height);
        //  获取了高度之后，要更新webview所在的cell，其他的cell就不用更新了，这样能更节省资源
        [self.tableView  reloadRowsAtIndexPaths:[NSArray arrayWithObjects:[NSIndexPath  indexPathForRow:2  inSection:0], nil]  withRowAnimation:UITableViewRowAnimationNone];
    }];

 }

创建一个 scrollview ，这样可以添加手势，双击放大倍数进行查看,webview 加在 scrollview 上。

- (UIScrollView *)scrollView
{
    if (!_scrollView) {
        _scrollView = [[UIScrollView alloc]init];
        _scrollView.delegate = self;
        _scrollView.zoomScale = 1;
        _scrollView.maximumZoomScale = 10;
        _scrollView.tag = 1000;
        [_scrollView addSubview:self.webView];
    }
    return _scrollView;
}

然后在 tableview 的代理方法- (UITableViewCell )tableView:(UITableView )tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
中：在指定的
[cell.contentView addSubview:self.scrollView];

WKWebView 在 tableview 上的展示

猜你喜欢