如何让 WebKit WebView 使用 CSS 样式表？答案

【问题标题】：How do I make a WebKit WebView use a CSS style sheet?如何让 WebKit WebView 使用 CSS 样式表？
【发布时间】：2011-09-22 06:05:16
【问题描述】：

我创建了一个指向 CSS 文件的 html 链接，在浏览器中打开它，样式显示正确。
然后我将它加载到 WebView 中并且样式不显示。
我什至尝试将 <link> 从 Objective-C 插入 DOM，这是我的最终目标，但都没有成功。
我是否必须以某种方式在 webView 上启用 CSS？

编辑：
CSS 包含在 html 中：
<link rel='StyleSheet' href="file://localhost/Users/petruza/Source/Scrape/build/Debug/Scrape.app/Contents/Resources/Scrape.css" type="text/css" >

插入到 DOM 中的 CSS：（我检查过，它确实被插入了）

NSURL *cssUrl = [[NSBundle mainBundle] URLForResource:@"Scrape.css" withExtension: nil];

DOMDocument* dom = [[web mainFrame] DOMDocument];

[window setTitleWithRepresentedFilename: lastRunScript];

DOMElement* link = [dom createElement:@"link"];

[link setAttribute:@"rel" value:@"StyleSheet"];
[link setAttribute:@"type" value:@"text/css"];
[link setAttribute:@"href" value: [cssUrl absoluteString]];
    
DOMElement* head = (DOMElement*) [[dom getElementsByTagName:@"head"] item:0];
DOMElement* headFirstChild = head.firstElementChild;

if( headFirstChild )    
    [head insertBefore:link refChild:(DOMNode *)headFirstChild];    
else
    [head appendChild:(DOMNode *)link];

编辑2：
我的 WebView 和 Safari 中显示的完全相同的 html：

【问题讨论】：

代码在哪里？ CSS 包含是什么样的？
我不能开始赏金吗？我没有看到更多回复

标签： css cocoa macos webkit webview

【解决方案1】：

您可能需要包含一个 html <base> 元素来告诉 webview 它应该在哪里寻找 css 文件。

【讨论】：

但是 css href 是绝对的：<link rel='StyleSheet' href="file://localhost/Users/petruza/Source/Scrapp/build/Debug/Scrapp.app/Contents/Resources/Scrapp.css" type="text/css" > 并且 safari 可以在没有的情况下正确获取它
我实际上是在运行时从捆绑资源中获取此值，并将相同的 URL 用于 webview 和我在浏览器中加载的 html，html 正确显示，但 webView 没有.
您的绝对网址错误。它可能行不通，但试试这个 href：file:///Users/petruza/Source/Scrapp/build/Debug/Scrapp.app/Contents/resources/Scrapp.css
谢谢，但即使在 Safari 中也能正常工作。我也尝试了不带localhost的绝对路径，还尝试引用原始CSS文件，而不是Bundle内的副本，它们都可以在外部浏览器上运行，而它们都不能在我的WebView中运行
底线是这样的：具有相同的 same html 引用了 CSS 的相同绝对 URL，在浏览器上工作但在我的 WebView 中不工作。 html 确实显示正确，但没有指定样式。（在我的 WebView 中）我想知道的是 WebView 是否默认不允许 CSS 或类似的东西。

【解决方案2】：

对不起，我的错，我正在加载带有字符串的 WebView，但没有提供 baseURL：
之前：

[[web mainFrame]
 loadHTMLString: output
 baseURL:[NSURL URLWithString:@""]];

之后：

[[web mainFrame]
 loadHTMLString: output
 baseURL:[NSURL URLWithString:@"file://localhost/"]];

现在可以了！

【讨论】：

这不是@Femi 一直试图告诉你的吗？此外，上面的代码甚至不是您的 OP 的一部分。平心而论，我认为你应该接受他的回答。
好的，完成。但是我不能强制 HTML 有任何东西，因为它是用户提供的，所以不能强制执行标记。问题是我在哪里发出加载请求，它没有包含在 OP 中，因为那时我没有意识到这一点。
其实在HTML中加个并不能解决问题，因为CSS路径是绝对的，问题出在页面加载上，不过还是谢谢大家的回答。跨度>

【解决方案3】：

另一种选择是使用 WebView 的用户样式表首选项：

WebView* webView = /* snip */;
webView.preferences.userStyleSheetEnabled = YES;
webView.preferences.userStyleSheetLocation = [NSURL fileURLWithPath:@"my/stylesheet.css"];

假设可以通过 URL 访问样式数据，这可能是最简单的方法。

【讨论】：

WKWebView 呢？