将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; 
}

来源

2015-09-25 ksnortum

您是否试图改变'WebView'的风格或WebView中显示的HTML页面？ –

WebView中的HTML。 – ksnortum

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; 
}

来源

2015-12-17 16:35:16 fabian

这是有用的，工作非常好。谢谢@fabian。 –

你的代码适用于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); 
    } 
}

编辑：又见@ Fabian的答案，这是在绝大多数的情况下，使用更清洁和优选。

来源

2015-09-25 15:40:03

将CSS文件应用于JavaFX WebView

回答

相关问题