在 UIWebView 中使用本地 CSS 文件
Posted
技术标签:
【中文标题】在 UIWebView 中使用本地 CSS 文件【英文标题】：Use a local CSS file in UIWebView 【发布时间】：2012-02-21 21:47:43 【问题描述】：我已经在网上搜索并尝试了几种方法，但是我的 XCode 项目中有一个 CSS 文件和一个 UIWebView，它的控制器中写入了 html。
我需要让 WebView 识别 CSS 文件并在向用户显示视图时使用它。我不能依赖可以访问互联网的应用程序，所以我尝试了所有我见过的不依赖它的方法。以下是我到目前为止所拥有的，但它不起作用：
style.css 位于支持文件中
NSString *html = @"<html><head><link rel=\"stylesheet\" type=\"text/css\"
href=\"style.css\" ><title>Words</title><link rel=\"stylesheet\" type=\"text/css\"
href=\"style.css\" /></head><body><table cellpadding=\"0\" cellspacing=\"0\"
border=\"0\"
width=\"100%\" class=\"resource-table\"><tr><th width=\"20%\">Reference/Performance
Level</th><th width=\"20%\">Words</th><th width=\"20%\">Words</th><th
width=\"20%\">Words</th><th width=\"20%\">Highly Effective</th></tr><tr><td><p
class=\"bold\">Words</p><p>Words</p></td><td><ul class=\"normal\"><li>Words</li></ul>
</td><td><ul class=\"normal\"><li>Words</li></ul></td><td><ul class=\"normal\">
<li>Words</li></ul></td><td><ul class=\"normal\"><li>Words</li></ul></td></tr><tr><td>
<p class=\"bold\">Domain 4f P. 107</p><p>4-Decision Making</p></td><td><ul
class=\"normal\"><li>Words</li></ul></td><td><ul class=\"normal\"><li>Words</li></ul>
</td><td><ul class=\"normal\"><li>Words</li></ul></td><t<ul class=\"normal\">
<li>Words</li></ul></td></tr><tr><td><p class=\"bold\">Words</p></td><td></td><td>
</td><td></td><td><ul class=\"normal\"><liWords</li><li>Words</li></ul></td></tr>
</table></body></style></html>";
NSString *path = [[NSBundle mainBundle] bundlePath];
NSURL *baseURL = [NSURL fileURLWithPath:path];
[webView loadHTMLString:html baseURL:baseURL];
【问题讨论】：
究竟是什么不起作用？我刚刚添加了一个 css 文件并复制了您的代码，它对我有用... 【参考方案1】：必须在文件夹引用中包含文件的相对路径
您的 css 文件是否位于应用的根目录？如果是这样，我不知道为什么您的代码不起作用。我的猜测是您的 css 文件存在于 "folder reference"（蓝色文件夹）中，在这种情况下，您还必须在 baseURL 中包含文件夹路径（或将 html 更改为 href=\"someFolder/style.css\"）。
请注意，当您编译您的应用程序时，文件夹组内的资源（图像等）将被展平到同一个文件夹中，但文件夹引用会保持其文件夹层次结构。
仔细检查文件位置
-
找到您的应用程序（MyCoolProj.app 文件）。您可以通过扩展“产品”从 XCode 中执行此操作。在这下面应该是你的 .app 文件。如果您为此文件调出上下文菜单，您应该能够“在 Finder 中显示”。
现在您在 finder 中找到了您的 .app 文件，选择它并再次调出上下文菜单。现在选择“显示包装内容”。
您现在应该可以看到应用程序中的所有文件。找到你的css文件在哪里。如果它在文件夹中，那么它肯定在您项目中的文件夹引用中，并且要引用它，您必须包含您为访问它而遍历的相对文件夹路径。
旁注：您还应该注意到文件夹组（不是文件夹引用）中的所有图像和其他资源都存在于 .app 文件根目录的同一文件夹中。它们不再具有文件夹层次结构。这就是为什么您可以使用[UIImage imageNamed:] 找到只有名称的图像，例如：[UIImage imageNamed:@"someImageName.png"]。如果它们存在于文件夹引用中，您必须再次包含该路径。
【讨论】：
【参考方案2】：您可以使用样式标记直接在 HTML 代码中实现样式，而不是单独的文件。
希望对你有帮助！！
【讨论】：
当您有多个 HTML 文件并希望重用 CSS 时，这不是很有用。【参考方案3】：您还可以创建 html 文件并将其加载到应用程序内的 UIWebview 中，如下所示：
NSString *resources = [[NSBundle mainBundle] resourcePath];
NSString *filePath = [resources stringByAppendingPathComponent:@"infotext.html"];
NSError *error = nil;
NSString * resourceFileContent = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:&error];
if (error != nil)
@throw [NSException exceptionWithName:[error domain] reason:[error localizedDescription] userInfo:[error userInfo]];
NSURL *baseURL = [NSURL fileURLWithPath:resources];
[self.mWebView loadHTMLString:resourceFileContent baseURL:baseURL];
【讨论】：
问题是html代码是动态的，所以我需要在控制器中完成所有这些。以上是关于在 UIWebView 中使用本地 CSS 文件的主要内容，如果未能解决你的问题，请参考以下文章
monotouch uiwebview 找不到本地 html
Xcode - UIWebview 不显示 CSS、Javascript 或外部内容
使用 JavaScript 的 UIWebView CSS 注入