将本地 css 文件加载到网络视图中

Question

我构建了一个简单的 ios 应用程序，将从服务器下载的 html 加载到网络视图中。

[self.webView loadHTMLString:notif.html baseURL:nil];

这很完美。问题是我需要将本地 css 文件应用到 webview，但我不知道该怎么做。

我试过这样做，但没有应用样式。

NSString *HTML_HEADER=@"<HTML><HEAD><link rel='stylesheet' href='style.css' type='text/css'></HEAD><BODY>";
NSString *HTML_FOOTER=@"</BODY></HTML>";
NSString *htmlString = [NSString stringWithFormat:@"%@%@%@",HTML_HEADER,notif.html,HTML_FOOTER]; 

NSLog(@"htmlString %@", htmlString);
[self.webView loadHTMLString:htmlString baseURL:nil];

有什么想法吗？

谢谢

更新：

我尝试执行以下操作：

NSString *HTML_HEADER=@"<HTML><HEAD><link rel='stylesheet' href='#FILE1#' type='text/css'></HEAD><BODY>";
    NSString *HTML_FOOTER=@"</BODY></HTML>";

    NSString *cssFilePath = [[NSBundle mainBundle] pathForResource:@"style" ofType:@"css"];
    NSString *html_header_with_files = [HTML_HEADER stringByReplacingOccurrencesOfString:@"#FILE1#" withString:cssFilePath];


    NSString *htmlString = [NSString stringWithFormat:@"%@%@%@",html_header_with_files,notif.html,HTML_FOOTER];

    NSLog(@"htmlString %@", htmlString);
    [self.webView loadHTMLString:htmlString baseURL:nil];

并且在构建阶段我添加了 style.css

更新 2：

我还检查 style.css 是否存在

 NSString* filePath = [[NSBundle mainBundle] pathForResource:@"style" ofType:@"css"];
    NSLog(@"\n\nthe string %@",filePath);

Answer 1

原因是 CSS 并且 JS 文件在运行时不可用，无法在 HTML 中呈现。

您需要注意几点：

必须将所有 CSS/JS/HTML 文件添加到 项目属性 >> 构建阶段 >> 复制捆绑资源。

检查是否添加了所有文件，如果没有，则手动添加这些文件。

所有文件都应放在同一个文件夹中，以便参考文件路径在运行时可用。
与其直接使用文件名，不如使用标记。使用符号作为标记，替换为 CSS 和 JS 文件的实际路径。

例如：

NSString *HTML_HEADER=@"<HTML><HEAD><link rel='stylesheet' href='#FILE1#' type='text/css'></HEAD><BODY>";
NSString *HTML_FOOTER=@"</BODY></HTML>";

NSString *cssFilePath = [[NSBundle mainBundle] pathForResource:@"style" ofType:@"css"];
NSString *html_header_with_files = [HTML_HEADER stringByReplacingOccurrencesOfString:@"#FILE1#" withString:cssFilePath];


NSString *htmlString = [NSString stringWithFormat:@"%@%@%@",html_header_with_files,notif.html,HTML_FOOTER];

NSLog(@"htmlString %@", htmlString);
[self.webView loadHTMLString:htmlString baseURL:nil];

在上面的示例中，我从 html 部分替换了 style.css 字符串并添加了标记 #FILE1#.

此标记与文件 style.css 相关 url，它将在 html 加载到 webView 之前被替换。

所以每当你想加载 html 到 webView 时，从他们的亲戚 url 加载所有资源文件。

此处HTML_HEADER将替换为所有资源文件的实际路径。

Answer 2

您可以导入文件（如 CSS、JS ...），甚至无需将它们放入 "Copy bundle resources"，因此您只需下载 CSS 并在 [=26] 期间使用它=] 你的应用程序。

技巧在于设置 "baseURL" 参数，它成为您的 UIWebView 的根目录。

// HTML file
NSString *htmlFile = [[NSBundle mainBundle] pathForResource:htmlFileName     ofType:@"html"];
NSString* htmlString = [NSString stringWithContentsOfFile:htmlFile encoding:NSUTF8StringEncoding error:nil];

// root directory
NSURL *rootDir = [[NSBundle mainBundle] bundleURL];

[self.webView loadHTMLString:htmlString baseURL:rootDir];

然后，当你说 <link rel="stylesheet" type="text/css" href="style.css">

在您的 HTML 文件中，应用程序将在 rootDir 目录中查找 style.css（在本例中为 [[NSBundle mainBundle] bundleURL]）

Answer 3

我终于找到了解决办法。

  NSString *HTML_HEADER=@"<HTML><HEAD><link rel='stylesheet' href='#FILE1#' type='text/css'></HEAD><BODY>";
    NSString *HTML_FOOTER=@"</BODY></HTML>";

    NSString *cssFilePath = [[NSBundle mainBundle] pathForResource:@"style" ofType:@"css"];
    NSString *html_header_with_files = [HTML_HEADER stringByReplacingOccurrencesOfString:@"#FILE1#" withString:cssFilePath];


    NSString *htmlString = [NSString      stringWithFormat:@"%@%@%@",html_header_with_files,notif.html,HTML_FOOTER];



   NSString *path = [[NSBundle mainBundle] bundlePath];
   NSURL *baseURL = [NSURL fileURLWithPath:path];

 NSLog(@"htmlString %@", htmlString);
    [self.webView loadHTMLString:htmlString baseURL:baseURL];

需要在loadHTMLString中指定bundlePath:

解决方案是@Kampai 和@itzprintz 给出的两个答案的组合

将本地 css 文件加载到网络视图中

load a local css file into a webview

html

ios

css

webview