将CSS文件应用于JavaFX WebView
问题描述:
我正在尝试将CSS文件应用于JavaFX WebView对象。从我读过的内容来看,这应该能够做到这一点,但显然我错过了一些东西,因为WebView在没有任何样式的情况下显示。将CSS文件应用于JavaFX WebView
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文件看起来像这样:
.browser {
-fx-background-color: #00ff80;
-fx-font-family: Arial, Helvetica, san-serif;
}
答
James_D already explained in his answer如何转换 “了JavaFx CSS” 为 “HTML CSS”,但它可能是使用WebEngine.setUserStylesheetLocation
设置包含CSS样式表更方便:
webEngine.setUserStyleSheetLocation(getClass().getResource("style.css").toString());
的style.css包含css代码:
body {
background-color: #00ff80;
font-family: Arial, Helvetica, sans-serif;
}
+0
这是有用的,工作非常好。谢谢@f*。 –
答
你的代码适用于CSS来了JavaFX WebView
节点;您正尝试将CSS应用于WebView
中显示的HTML文档。由于Web视图没有任何文本的JavaFX节点,因此-fx-font-family
不起作用,并且HTML页面的背景会遮蔽WebView的背景,因此-fx-background-color
将不可见。
为了做到你想做的事,你需要操纵已加载文档的DOM并将CSS(标准,HTML适用)应用到它。这看起来是这样的:
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);
}
}
编辑:又见@ F*的答案,这是在绝大多数的情况下,使用更清洁和优选。
您是否试图改变'WebView'的风格或WebView中显示的HTML页面? –
WebView中的HTML。 – ksnortum