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="width:402.75pt;border:solid windowtext 1.0pt; padding:0cm 5.4pt 0cm 5.4pt;height:20.25pt" contenteditable="true"> Report card </td> </tr> <tr style="height:20.25pt"> <td width="129" style="width: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="width: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="width: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="width: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> 13 </u> </td> </tr> <tr style="height:20.25pt"> <td width="129" style="width: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="width: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> 14 </u>. </td> </tr> <tr style="height:20.25pt"> <td width="129" style="width: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="width: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> 15 </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; }