将CSS文件应用于JavaFX WebView [英] Applying CSS file to JavaFX WebView
问题描述
我尝试将CSS文件应用于JavaFX WebView对象。从我读过的，这应该做的伎俩，但显然我缺少的东西，因为WebView显示没有任何造型。
I am trying to apply a CSS file to a JavaFX WebView object. From what I've read, this should do the trick, but evidently I'm missing something because the WebView displays without any styling.
package net.snortum.play;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.VBox;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
public class WebviewCssPlay extends Application {
@Override
public void start(Stage stage) {
stage.setTitle("CSS Styling Test");
stage.setWidth(300);
stage.setHeight(200);
WebView browser = new WebView();
WebEngine webEngine = browser.getEngine();
webEngine.loadContent("<html><body><h1>Hello!</h1>This is a <b>test</b></body></html>");
VBox root = new VBox();
root.getChildren().addAll(browser);
root.getStyleClass().add("browser");
Scene scene = new Scene(root);
stage.setScene(scene);
scene.getStylesheets().add("/net/snortum/play/web_view.css");
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
我的CSS文件看起来像这样：
My CSS file looks like this:
.browser {
-fx-background-color: #00ff80;
-fx-font-family: Arial, Helvetica, san-serif;
}
推荐答案
JavaFX WebView 节点;您尝试将CSS应用于 WebView 中显示的HTML文档。由于Web视图没有任何文本的JavaFX节点，因此 -fx-font-family 没有效果，HTML页面的背景将遮蔽WebView的背景，因此 -fx-background-color 将不可见。
Your code applies CSS to the JavaFX WebView node; you are trying to apply CSS to the HTML document displayed inside the WebView. Since the web view has no JavaFX nodes with any text, -fx-font-family has no effect, and the background of the HTML page will obscure the background of the WebView, so -fx-background-color will not be visible.
为了做你想要的，你需要操纵加载的文档的DOM，并应用（标准的，HTML适用的）CSS。这看起来像：
In order to do what you want, you need to manipulate the DOM of the loaded document and apply (standard, HTML-applicable) CSS to it. This would look something like:
import javafx.application.Application;
import javafx.concurrent.Worker.State;
import javafx.scene.Scene;
import javafx.scene.layout.VBox;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
import org.w3c.dom.Document;
import org.w3c.dom.Element;
import org.w3c.dom.Text;
public class WebViewCssPlay extends Application {
private static final String CSS =
"body {"
+ " background-color: #00ff80; "
+ " font-family: Arial, Helvetica, san-serif;"
+ "}";
@Override
public void start(Stage stage) {
stage.setTitle("CSS Styling Test");
stage.setWidth(300);
stage.setHeight(200);
WebView browser = new WebView();
WebEngine webEngine = browser.getEngine();
webEngine.getLoadWorker().stateProperty().addListener((obs, oldState, newState) -> {
if (newState == State.SUCCEEDED) {
Document doc = webEngine.getDocument() ;
Element styleNode = doc.createElement("style");
Text styleContent = doc.createTextNode(CSS);
styleNode.appendChild(styleContent);
doc.getDocumentElement().getElementsByTagName("head").item(0).appendChild(styleNode);
System.out.println(webEngine.executeScript("document.documentElement.innerHTML"));
}
});
webEngine.loadContent("<html><body><h1>Hello!</h1>This is a <b>test</b></body></html>");
VBox root = new VBox();
root.getChildren().addAll(browser);
root.getStyleClass().add("browser");
Scene scene = new Scene(root);
stage.setScene(scene);
// scene.getStylesheets().add("/net/snortum/play/web_view.css");
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
编辑：另见@ fabian的回答更清洁并且在绝大多数使用情况下是优选的。
also see @fabian's answer, which is much cleaner and preferable in the vast majority of use cases.
这篇关于将CSS文件应用于JavaFX WebView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
