Applying CSS File to Javafx Webview

Applying CSS file to JavaFX WebView

James_D already explained in his answer how to convert "JavaFx CSS" to "HTML CSS", but it may be more convenient to use WebEngine.setUserStylesheetLocation to set a stylesheet that contains the CSS:

webEngine.setUserStyleSheetLocation(getClass().getResource("style.css").toString());

style.css contains the css code:

body {
    background-color: #00ff80; 
    font-family: Arial, Helvetica, sans-serif;
}

javafx webview load local css files

Putting the css file in the same directory as the html file, will work if

webView.getEngine().load(location);

is used. However it will not work for loadContent(). You need to explicitly define the css file location as:

(pseudo-code)

str = str.replace("href='main.css'", 
                  "href='" + getClass().getResource("main.css") + "'");

JavaFx WebEngine - Overwriting a website's stylesheet with (local) files

First of I have to state, that I hope you know what you are doing, as these things can seriously damage a web site.
So here is what you can do:

You grab the Document from the WebEngine, retrieve the head element and add a style child element to it, containing the src location of the stylesheet you want to add.

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

By the way, JavaScript can be added in a similar way, it's just 'script' instead of 'style'

Specific CSS for JavaFX web view

We can load a css file to WebView. This CSS behaves same way in both traditional browsers as well as web view.

adding stylesheets to webview

    stage.setTitle("Web View");
    scene = new Scene(new Browser(),750,500, Color.web("#666970"));
    stage.setScene(scene);
    scene.getStylesheets().add("webviewsample/BrowserToolbar.css");        
    stage.show();

Full example

import javafx.application.Application;
import javafx.geometry.HPos;
import javafx.geometry.VPos;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Priority;
import javafx.scene.layout.Region;
import javafx.scene.paint.Color;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;

public class WebViewSample extends Application {
    private Scene scene;
    @Override public void start(Stage stage) {
        // create the scene
        stage.setTitle("Web View");
        scene = new Scene(new Browser(),750,500, Color.web("#666970"));
        stage.setScene(scene);
        scene.getStylesheets().add("webviewsample/BrowserToolbar.css");        
        stage.show();
    }

    public static void main(String[] args){
        launch(args);
    }
}
class Browser extends Region {

    final WebView browser = new WebView();
    final WebEngine webEngine = browser.getEngine();

    public Browser() {
        //apply the styles
        getStyleClass().add("browser");
        // load the web page
        webEngine.load("http://www.oracle.com/products/index.html");
        //add the web view to the scene
        getChildren().add(browser);

    }
    private Node createSpacer() {
        Region spacer = new Region();
        HBox.setHgrow(spacer, Priority.ALWAYS);
        return spacer;
    }

    @Override protected void layoutChildren() {
        double w = getWidth();
        double h = getHeight();
        layoutInArea(browser,0,0,w,h,0, HPos.CENTER, VPos.CENTER);
    }

    @Override protected double computePrefWidth(double height) {
        return 750;
    }

    @Override protected double computePrefHeight(double width) {
        return 500;
    }
}

for more details, please refer this link

JavaFX WebView add stylesheet, parsing calc error

You are applying the stylesheet to the WebView itself, not to the document it is displaying. This will attempt to style the WebView itself: it won't apply the CSS to the HTML content. For JavaFX scene graph nodes, the calc function is not supported: the JavaFX CSS reference shows what CSS is valid for JavaFX scene graph nodes.

I suspect that what you are trying to do is to use the style sheet for the HTML document displayed by the WebView. To do that, you should reference the stylesheet in the HTML document in the usual way.

If you want to dynamically load a stylesheet, you can try manipulating the HTML document once it is loaded. Something along the following lines:

private void addStylesheet(Document doc, String cssLocation) {
    Element docElement = doc.getDocumentElement();
    NodeList heads = docElement.getElementsByTagName("head");
    Element head ;
    if (heads.getLength() == 0) {
        head = doc.createElement("head");
        docElement.appendChild(head);
    } else {
        head = (Element) heads.item(0);
    }
    Element link = doc.createElement("link");
    link.setAttribute("rel", "stylesheet");
    link.setAttribute("type", "text/css");
    link.setAttribute("href", cssLocation);
    head.appendChild(link);     
}

And then

    WebEngine engine = webView.getEngine();

    engine.getLoadWorker().stateProperty().addListener((obs, oldState, newState) -> {
        if (newState == Worker.State.SUCCEEDED) {
            addStylesheet(engine.getDocument(), "http://page.com/style.css");
        }
    });

    engine.load(/* your html ... */);

---

Related Topics