JavaFx WebEngine - 用（本地）文件覆盖网站的样式表答案

【问题标题】：JavaFx WebEngine - Overwriting a website's stylesheet with (local) filesJavaFx WebEngine - 用（本地）文件覆盖网站的样式表
【发布时间】：2020-08-30 19:16:37
【问题描述】：

我想自定义我正在加载的网站的外观，所以我创建了一个小的 test.css 文件，它只改变所有表格行的外观：

tr {
    height: 22px;
    background-image: url("test.png");
}

如何让 WebEngine 加载此文件并用我的替换页面自己的 CSS 规则？ 另外，我希望能够加载特定于页面的 css 文件，而不是为所有页面加载一个巨大的文件。

我找到了this page，但它只显示了如何通过 DOM 运行并手动为所需元素分配新样式。当然，这不是我想要的。相反，我希望浏览器将我的文件用作“用户默认值”。

感谢任何帮助:)

【问题讨论】：

标签： java html css javafx-8 javafx-webengine

【解决方案1】：

首先我必须声明，我希望您知道自己在做什么，因为这些事情会严重损害网站。所以这是你可以做的：

您从WebEngine 中获取Document，检索head 元素并向其添加style 子元素，其中包含您要添加的样式表的src 位置。

Document doc = webView.getEngine().getDocument();
URL scriptUrl = getClass().getResource(pathToAttachedDocument); // pathToAttachedDocument = CSS file you want to attach
String content = IOUtils.toString(scriptUrl); // Use Apache IO commons for conveniance
Element appendContent = doc.createElement("style");
appendContent.appendChild(doc.createTextNode(content));
doc.getElementsByTagName("head").item(0).appendChild(appendContent);

顺便说一句，JavaScript 可以用类似的方式添加，只是 'script' 而不是 'style'

【讨论】：

我的错误是创建一个link 元素来引用css 文件而不是style，但是在页面完全加载后这样做显然无法正常工作。非常感谢！还有一件事：我必须将test.png 放在哪里？ 我尝试将它保存在与css 文件相同的文件夹和项目根文件夹中。该引用似乎仅在将其链接到在线 URL 时才有效。
在您的示例中定义的test.png 应该与加载的 CSS 文件位于同一位置。您也可以将它放在不同的文件夹中，并在 CSS 中使用它的相对路径。
我尝试将文件放在同一个文件夹中，但什么也没发生 - 背景是空白的。它仅在我将文件复制到我的网络空间并从那里加载时才有效 (background-image: url("http://www.blabla.com/test.png") !important;)，但这不是预期的解决方案：O
您是否使用 JVM 版本 1.8.0_60？我认为该版本存在问题，因此您必须在 HTML 中使用 classpath: 前缀引用本地资源。
你说的完全正确，我确实使用版本 1.8.0_60。但是，我不知道如何执行您的建议 - 抱歉 =/ 我必须将 background-image: url("classpath:test.png") !important; 放入我的 css 文件中，还是我必须弄乱 .classpath 文件？（我使用 Eclipse 顺便说一句）

【解决方案2】：

我希望这样做来添加或替换任何规则：

String css  = getFileAsString("style.css");
Document doc = webEngine.getDocument();
Element e = doc.getElementById("my_style");
e.setTextContent(css);

...给定一个

<style id="my_style"></style>

HTML 文档中的标记。

【讨论】：

【解决方案3】：

setUserStyleSheetLocation() 就是为这个目的而设计的：让网页的用户可以根据自己的需要设置样式。

用法：

webEngine.setUserStyleSheetLocation(styleSheetURL.toString());

【讨论】：