iOS 设置UIWebView 展示字体大小，颜色，展示布局

最新推荐文章于 2019-09-06 09:51:03 发布

保儿子

最新推荐文章于 2019-09-06 09:51:03 发布

阅读量508

点赞数

分类专栏： IT 文章标签： iOS uiwebview

本文链接：https://blog.csdn.net/chuanhe01/article/details/74908730

版权

IT 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

有时不能返回H5，但是又要使用UIWebView的特性展示效果，这时可以将后台返回的数据，一般为JSON，封装为HTML，然后调用UIWebView的

- (void)loadHTMLString:(NSString *)string baseURL:(nullable NSURL *)baseURL;

方法加载。

建议使用<p></p>标签，因为可以方便的设置格式显示；

封装为HTML:

NSString *tem_HTML_Str = [NSString stringWithFormat:@"<p>%@</p><p>%@  %@</p>",[_dataDic objectForKey:@"title"],[_dataDic objectForKey:@"source"],[_dataDic objectForKey:@"releaseTime"]];

- (void)webViewDidFinishLoad:(UIWebView *)webView {

    NSLog(@"页面加载完毕");
    // 设置字体颜色
    [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('p')[0].style.color= '#464E78'"];
    // 设置字体大小
    [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('p')[0].style.fontSize= '30px'"];
    // 设置字体边距
    [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('p')[0].style.margin= '0'"];

    // 设置其他标签格式
    [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('p')[1].style.color= '#AEB3CF'"];
    
    [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('p')[2].style.webkitTextSizeAdjust= '100%'"];
    [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('p')[2].style.color= '#464E78'"];
    
}

代理方法里面设置格式：

- (void)webViewDidFinishLoad:(UIWebView *)webView {

    NSLog(@"页面加载完毕");
    // 设置字体颜色
    [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('p')[0].style.color= '#464E78'"];
    // 设置字体大小
    [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('p')[0].style.fontSize= '30px'"];
    // 设置字体边距
    [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('p')[0].style.margin= '0'"];

    // 设置其他标签格式
    [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('p')[1].style.color= '#AEB3CF'"];
    
    [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('p')[2].style.webkitTextSizeAdjust= '100%'"];
    [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('p')[2].style.color= '#464E78'"];
    
}

效果图如下：

有时候需要设置图片大小已适应屏幕，此时可以

        [webView stringByEvaluatingJavaScriptFromString:"document.getElementsByTagName('img')[0].style.maxWidth= '100%'"];

就可以将HTML中第一个图片设置为屏幕自适应大小。

如果有多个图片，则可以：

    NSString *length_tem = [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('img').length"];
    
    
    for (int i = 0 ; i < [length_tem intValue]; i++) {
        
        [webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"document.getElementsByTagName('img')[%d].style.maxWidth= '100%%'",i]];
    }

先获取图片个数，使用For循环将图片设置为屏幕自适应大小。
效果为：