使用WKWebView加载Html5文本，修改文本行间距以及字体颜色、大小等

Posted on
  • 在使用WKWebView加载Html文本的时候，需要引入头文件
    #import <WebKit/WebKit.h>
  • 创建WKWebView,修改行间距只能通过这种方式修改(目前已知)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    - (WKWebView *)webView {
    if (!_webView) {
        self.webView = ({
            WKWebView *web = [[WKWebView alloc] initWithFrame:CGRectMake(10*DHFlexibleHorizontalMutiplier(), 97*DHFlexibleHorizontalMutiplier(), 297*DHFlexibleHorizontalMutiplier(), 309*DHFlexibleHorizontalMutiplier())];

                    NSString *str = [NSString stringWithFormat:@"<div style=\"line-height: 30px\">%@",_rule];

                    [web loadHTMLString:str baseURL:nil];
                    web.scrollView.showsVerticalScrollIndicator = NO;
                    web.scrollView.bounces = NO;
                    web.navigationDelegate = self;
                    for (UIView *view in web.subviews) {
                    NSLog(@"%@",view);
                }
                web;
            });
        }
        return _webView;
    }
  • 关键代码
    1
    NSString *str = [NSString stringWithFormat:@"<div style=\"line-height: 30px\">%@",_rule];

这句代码在拼接的时候需要“\”转义，源代码为
<div style="line-height: 30px">

  • 修改文本的字体和颜色
    在代理方法中
    1
    2
    3
    4
    5
    6
    - (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
    //修改字体大小
        [ webView evaluateJavaScript:@"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '300%'"completionHandler:nil];
        //修改字体颜色
        [ webView evaluateJavaScript:@"document.getElementsByTagName('body')[0].style.webkitTextFillColor= '#999999'"completionHandler:nil];
    }
  • 300%—字体大小，#999999—颜色