怎么在UIWebView / WKWebView中将CSS插入到加载的HTML中?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (96)

我能够成功获取HTML内容并显示到我的UIWebView中。

但是想通过添加外部CSS文件来自定义内容。我只能改变文字和字体的大小。我尝试了所有可能的解决方案来进行更改,但它不起作用 -没有显示任何更改。

以下是我的代码

HTMLNode* body = [parser body];
HTMLNode* mainContentNode = [body  findChildWithAttribute:@"id" matchingName:@"main_content" allowPartial:NO];
NSString *pageContent = [NSString stringWithFormat:@"%@%@", cssString, contentHtml];
        [webView loadHTMLString:pageContent baseURL:[NSURL URLWithString:@"http://www.example.org"]];

-(void)webViewDidFinishLoad:(UIWebView *)webView1{
    int fontSize = 50;
    NSString *font = [[NSString alloc] initWithFormat:@"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '%d%%'", fontSize];
    NSString *fontString = [[NSString alloc] initWithFormat:@"document.getElementById('body').style.fontFamily=\"helvetica\""];

    [webView1 stringByEvaluatingJavaScriptFromString:fontString];
    [webView1 stringByEvaluatingJavaScriptFromString:font];
}

提问于
用户回答回答于

可以这样:

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    NSString *cssString = @"body { font-family: Helvetica; font-size: 50px }"; // 1
    NSString *javascriptString = @"var style = document.createElement('style'); style.innerHTML = '%@'; document.head.appendChild(style)"; // 2
    NSString *javascriptWithCSSString = [NSString stringWithFormat:javascriptString, cssString]; // 3
    [webView stringByEvaluatingJavaScriptFromString:javascriptWithCSSString]; // 4
}

含义:

1:定义一个包含所有CSS声明的字符串

2:定义一个javascript字符串,它创建一个新的<style>HTML DOM元素并将CSS声明插入到其中。其实插入是在下一步完成,现在只有%@占位符。这样做是为了防止线路变得太长,但步骤2和3可以一起完成。

3:组合2个字符串

4:在UIWebView中执行javascript

为了这个工作,你的HTML必须有一个<head></head>元素。

也可以将一个<link>元素注入到<head>加载CSS文件的元素中:

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    NSString *path = [[NSBundle mainBundle] pathForResource:@"styles" ofType:@"css"];
    NSString *javascriptString = @"var link = document.createElement('link'); link.href = '%@'; link.rel = 'stylesheet'; document.head.appendChild(link)";
    NSString *javascriptWithPathString = [NSString stringWithFormat:javascriptString, path];
    [webView stringByEvaluatingJavaScriptFromString:javascriptWithPathString];
}

此解决方案适用于大型CSS文件。不幸的是,它不适用于远程HTML文件。只有当想要将CSS插入到已下载到应用程序的HTML中时,才能使用它。

扫码关注云+社区