UIWebView的间距和加载iFrame的坑

最近换了工作，新的项目中遇到了很多关于UIWebView的坑，所以就在这里简单说一下，以便以后填坑：

HTML标签加载
Style配置和Font变换
iFrame的设置和停止播放
UITableView中的UIWebView

简单介绍

UIWebView是iOS中用来显示网页(H5页面)的控件，一般使用loadHTMLString(_:baseURL:)和loadRequest(_:)这两个方法来显示一个h5页面,简单地说就是一个嵌入到app中的Safari页面;一般可以用来做一些活动页面，因为在时间一到可以立刻修改服务器上的数据，从而禁止进入，H5页面修改起来也比原生app页面要好修改得多。

HTML标签加载

这里的HTML标签加载，是指当app需要去加载一些HTML的标签，比如<p>that's a simple</p>这样的标签时，所需要做的一些操作，主要是使用UIWebView的loadHTMLString(_:baseURL:)来载入HTML标签，这里的HTML标签以NSString的形式作为传参，实际上我们是可以直接把这样的NSString直接传入的,UIWebView也是可以很好地处理,比如：

NSString *HTMLStr = @"section><span style=\"margin: 0px; padding: 0px; color: rgb(198, 7, 7); box-sizing: border-box;\">that's an simple too</span>";
    [webView loadHTMLString:HTMLStr baseURL:nil];

这样直接的处理，UIWebView也是会加载在String里面声明的style的,但是在遇到某些style,比如万恶的微软雅黑……就会导致显示的界面出现问题，接下来马上就开始介绍如何给UIWebView加上style

Style配置和Font变换

因为在UIWebView里面加载的HTML实际上是一个NSString,所以给加上style的方法有2种：拼接<head></head>和指定UIWebView加载的CSS文件,这两种方法都可以用来设置WebView的style。

拼接

所谓拼接，指的是在执行loadHTMLString(_:baseURL:)之前，把局部的HTML拼接成完整的,具有head、body的HTML，这样的话在拼接的时候，就能够像构建HTML页面一样进行样式的调整,下面给出对应代码:

NSString *fontStyle = [[NSString alloc] initWithFormat:@"body {font-family: \"%@\"; font-size: 3; margin:0; padding:0; }\n",[UIFont systemFontOfSize:12].fontName];

    NSString *HTML = [[NSString alloc] initWithFormat:@"%@%@%@%@%@", @"<!DOCTYPE html>"
                           "<html lang=\"ja\">"
                           "<head>"
                           "<meta charset=\"UTF-8\">"
                           "<style type=\"text/css\">"
                           "iframe{"
                           "margin:0;"
                           "padding:0;"
                           "}"
                           ".n-content{"
                           "padding: 10px 15px;"
                           "font-size: 18px;"
                           "line-height: 2.5;"
                           "overflow-x: hidden;"
                           "}"
                           ,fontStyle,
                           @"</style>"
                           "</head>"
                           "<body id=\"page\">"
                           "<div class=\"n-content\">"
                           ,originalHTMLString,@"</div></body></html>"];

简单地说，就是拼接补全HTML内容，把之前的局部HTML代码用一个div给包括起来，那就可以方便地使用Style了。

iFrame的设置和停止播放

在UIWebView中有的时候需要播放一些iframe视频,现在网上的资料,大部分对iframe的介绍都是通过youtubePlayer来进行播放，坦白说，这非常好用，完全可以作为内嵌的一款YouTube视频播放器，但是因为需求，这里我需要去播放一些挂在腾讯上的iframe，那就比较蛋疼了。。。。

首先还是一样，通过拼接来进行HTML代码的补全，因为一般API所返回的都是iframe中的src，

        NSString *head = [NSString stringWithFormat:@"<iframe class=\"video_iframe\" type=\"text/html\" width=\"100%%\" height=\"100%%\" margin = 0; padding = 0 src=\""];

        NSString *foot = @"\" frameborder=\"0\" allowfullscreen = 0></iframe>";
        NSString *imageHTML = [NSString stringWithFormat:@"%@%@%@", head,[tempDict objectForKey:@"src"],foot];

比较蛋疼的一点是，使用iframe进行播放，在停止的时候需要加载一个空的html,而不是去进行webView的stoploading,因为在根本上，iframe显示出来的时候，loading就已经结束了。

[_videoWebView loadHTMLString:@"" baseURL:nil];

UITableView中的UIWebView

在TableViewCell中的webView跟其他控件没什么不同，只要在- (void)tableView:(UITableView )tableView willDisplayCell:(UITableViewCell )cell forRowAtIndexPath:(NSIndexPath *)indexPath里面进行webView的加载就好。