iOS wkWebview加载html表格JS交互

1.问题描述：接口返回的html类型字符串表格加载时出现以下图片情况

2.解决方法

- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{
    //自适应以及禁止用户点击
    [webView evaluateJavaScript:@"function compatTable(){var tableElements=document.getElementsByTagName("table");for(var i=0;i<tableElements.length;i++){var tableElement=tableElements[i];tableElement.cellspacing="";tableElement.cellpadding="";tableElement.width = document.body.clientWidth;tableElement.border="";tableElement.setAttribute("style","border-collapse:collapse; display:table;")}var tdElements=document.getElementsByTagName("td");for(var i=0;i<tdElements.length;i++){var tdElement=tdElements[i];tdElement.valign="";tdElement.width="";tdElement.setAttribute("style","border:1px solid black;");tdElement.setAttribute("contenteditable","false")}};compatTable();" completionHandler:nil];
//    WeakSelf;
//    [webView evaluateJavaScript:@"document.body.offsetHeight;" completionHandler:^(id _Nullable any, NSError * _Nullable error) {
//        NSString *heightStr = [NSString stringWithFormat:@"%@",any];
//
//        CGFloat webHeight = heightStr.floatValue;
//        selfWeak.tableView.tableHeaderView.frame = CGRectMake(0, 0, ScreenWidth, webHeight);
//        NSLog(@"获取的高度：%f",webHeight);
//    }];
}

3.补充

html测试资源，可将以下代码复制到空的html中（xcode创建空文件，改后缀名为.html），创建wkweb进行加载：

（1）表单以及本地加载

<table class="MsoNormalTable" border="1" cellspacing="0" cellpadding="0" style="margin-left:-37.5pt;border-collapse:collapse;border:none">  <tbody><tr style="height:20.25pt">   <td width="537" colspan="2" style="402.75pt;border:solid windowtext 1.0pt;   padding:0cm 5.4pt 0cm 5.4pt;height:20.25pt" contenteditable="true">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Report card
</td>  </tr>  <tr style="height:20.25pt">   <td width="129" style="96.75pt;border:solid windowtext 1.0pt;border-top:   none;padding:0cm 5.4pt 0cm 5.4pt;height:20.25pt" contenteditable="true">   Name
</td>   <td width="408" style="306.0pt;border-top:none;border-left:none;   border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;   padding:0cm 5.4pt 0cm 5.4pt;height:20.25pt" contenteditable="true">   Millie
</td>  </tr>  <tr style="height:20.25pt">   <td width="129" style="96.75pt;border:solid windowtext 1.0pt;border-top:   none;padding:0cm 5.4pt 0cm 5.4pt;height:20.25pt" contenteditable="true">   Chinese
</td>   <td width="408" style="306.0pt;border-top:none;border-left:none;   border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;   padding:0cm 5.4pt 0cm 5.4pt;height:20.25pt" contenteditable="true">   She does well in it. She has a good   memory and is good at <u>&nbsp;&nbsp;13&nbsp;&nbsp;</u>
</td>  </tr>  <tr style="height:20.25pt">   <td width="129" style="96.75pt;border:solid windowtext 1.0pt;border-top:   none;padding:0cm 5.4pt 0cm 5.4pt;height:20.25pt" contenteditable="true">   Maths
</td>   <td width="408" style="306.0pt;border-top:none;border-left:none;   border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;   padding:0cm 5.4pt 0cm 5.4pt;height:20.25pt" contenteditable="true">   It is quite good. But sometimes she is   <u>&nbsp;&nbsp;14&nbsp;&nbsp;</u>.
</td>  </tr>  <tr style="height:20.25pt">   <td width="129" style="96.75pt;border:solid windowtext 1.0pt;border-top:   none;padding:0cm 5.4pt 0cm 5.4pt;height:20.25pt" contenteditable="true">   History
</td>   <td width="408" style="306.0pt;border-top:none;border-left:none;   border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;   padding:0cm 5.4pt 0cm 5.4pt;height:20.25pt" contenteditable="true">   She's good at it,   and she knows <u>&nbsp;&nbsp;15&nbsp;&nbsp;</u> about Chinese history.
</td>  </tr> </tbody></table

NSString *filePath = [[NSBundle mainBundle] pathForResource:@"TestTable" ofType:@"html"];
        NSString *htmlString = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];
        displayContent = htmlString;
         [self.disPlayWeb loadHTMLString:displayContent baseURL:nil];

（2）初始化

- (WKWebView *)disPlayWeb{
    if (!_disPlayWeb) {
        //内容自适应
        NSString *jScript = @"var meta = document.createElement('meta'); 
        meta.name = 'viewport'; 
        meta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'; 
        var head = document.getElementsByTagName('head')[0];
        head.appendChild(meta);";
        
        WKUserScript *wkUScript = [[WKUserScript alloc] initWithSource:jScript injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
        WKUserContentController *wkUController = [[WKUserContentController alloc] init];
        [wkUController addUserScript:wkUScript];
        WKWebViewConfiguration *wkWebConfig = [[WKWebViewConfiguration alloc] init];
        wkWebConfig.userContentController = wkUController;
        
        //基本属性
        _disPlayWeb = [[WKWebView alloc] initWithFrame:CGRectZero configuration:wkWebConfig];
        _disPlayWeb.scrollView.showsVerticalScrollIndicator = NO;
        _disPlayWeb.UIDelegate = self;
        _disPlayWeb.navigationDelegate = self;
        //WKUIDelegate,WKNavigationDelegate
    }
    return _disPlayWeb;
}