iOS tableView嵌套部分WebView效果實現

對於一些資訊類的app,好比網易新聞，今日頭條這樣的，他們的文章詳情頁大部分基本都是tableView中嵌套webView來實現的效果，其中頂部標題，關注按鈕等這些多是原生的，內容部分是webView,評論部分，相關推薦等是原生的，對於這樣同樣比較複雜的頁面，今天這裏提供一個相似的demojavascript

<img src="https://images2018.cnblogs.com/blog/950551/201806/950551-20180608162437534-368859194.png" width="40%" height="40%"><img src="https://images2018.cnblogs.com/blog/950551/201806/950551-20180608161606399-1433122610.png" width="40%" height="40%">css

demo中頂部圖片頂部標題，活動時間等相關信息都是原生的代碼實現下面活動詳情是由webView來實現，最底部評論模塊通常都是原生來實現html

實現這種效果的主要思路就是拿到數據後，去加載webView，等webView加載完畢後，拿到html的高度，去從新設置網頁部分的高度java

核心實現代碼：git

-(void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{
    
    [self.webView evaluateJavaScript:@"document.body.offsetHeight" completionHandler:^(id _Nullable result, NSError * _Nullable error) {
        
        //這裏是重點 webView加載完成後須要把webView的高度返回 全部要在這裏計算tableView header的總高度
        [self.webView mas_updateConstraints:^(MASConstraintMaker *make) {
            make.height.mas_equalTo(([result doubleValue]+10));
        }];
        if (self.headerBlock) {
            //這裏計算高度，根據實際內容來 每一個高度都須要加上的
            CGFloat viewHeight = 0.0f;
            CGFloat SCREEN_WIDTH = [UIScreen mainScreen].bounds.size.width;
            viewHeight = [result doubleValue] + 10 + SCREEN_WIDTH *0.51 + 5 + [self getHeightWithTitle:self.paramDict[@"title"] font:self.titleLabel.font maxWidth:SCREEN_WIDTH -15 - 10] + 160;
            self.headerBlock(viewHeight);
        }
    }];
}

-(void)webView:(WKWebView *)webView didFailNavigation:(WKNavigation *)navigation withError:(NSError *)error{
    if (error) {
        if (self.headerBlock) {
            self.headerBlock(-1);
        }
    }
}

-(void)loadHtmtString:(NSString *)content{
    NSString *htmlcontent = [NSString stringWithFormat:
                             @"<html>"
                             "<head>"
                             "<meta charset='utf-8' name='viewport' content='width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no'/>"
                             "<style type=\"text/css\">"
                             "img {"
                             "max-width:100%%;"
                             //                             "width:auto;"
                             //                             "height:auto;"
                             "-webkit-tap-highlight-color:rgba(0,0,0,0);"
                             "}"
                             "</style>"
                             "<script type=\"text/javascript\">"
                             "</script>"
                             "</head>"
                             "<body>"
                             "<div>"
                             "<div id=\"webview_content_wrapper\">%@</div>"
                             "</div>"
                             "</body>"
                             "</html>"
                             ,content];
    [self.webView loadHTMLString:htmlcontent baseURL:nil];
}

解析json數據github

//取出json文件
    NSData *JSONData = [NSData dataWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"addata" ofType:@"json"]];
    
    NSDictionary *jsonDict = [NSJSONSerialization JSONObjectWithData:JSONData options:NSJSONReadingAllowFragments error:nil];

demo下載地址：https://github.com/qqcc1388/TYWebViewInTableViewDemo/ 轉載請標註來源：https://www.cnblogs.com/qqcc1388/p/9156236.htmlweb