Applying Css to content inside webview in javafx

Question

I am creating a sample app in JavaFx. I have loaded a local html file in webview in app. I want to apply style to that loaded html page from the app. When i try to do that the style is applied to entire webview. I only want to apply on that loaded html page not the webview.

This is index.html page that I am loading.

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>

<body>

<h1>My Web Page</h1>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()" id="btn">Try it</button>

</body>
</html>

This is demo.css

*{
    padding: 0;
    margin: 0;
}

#btn{
    font-weight: bold;
    font-size: 14px;
    padding: 10px 20px;
}

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

This is my javafx app code.

 Hyperlink hpl3 = new Hyperlink("Load Html File");
    hpl3.setOnAction(new EventHandler<ActionEvent>() {
      @Override public void handle(ActionEvent e) {
        String path = System.getProperty("user.dir");  
        path.replace("\\\\", "/");  
        path +=  "/html/index.html";  
        String path1 = System.getProperty("user.dir");  
        path1.replace("\\\\", "/");  
        path1 +=  "/css/demo.css";  
        webEngine.setUserStyleSheetLocation("file:///" + path1);
        webEngine.load("file:///" + path);   
      }
  });

Possible duplicate of [Applying CSS file to JavaFX WebView](http://stackoverflow.com/questions/32783532/applying-css-file-to-javafx-webview) — DVarga, Oct 19 '16 at 06:47
Do not try to create the file URLs yourself. There are classes in the java library doing this for you: `Path base = Paths.get(System.getProperty("user.dir")); String path = base.resolve(Paths.get("html", "index.html")).toUri().toURL().toExternalForm();` — fabian, Oct 19 '16 at 13:53

score -1 · Answer 1 · edited May 23 '17 at 12:09

As james-d said:

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

Source:

Applying CSS file to JavaFX WebView

in my index.html I have placed images also `` but in app it does not show the image. images folder is in root directory and index is in html folder which is also in root directory. — Sonali, Oct 19 '16 at 07:22
`String path = System.getProperty("user.dir"); path.replace("\\\\", "/"); path += "/html/index.html"; ` is there any another way to reference these files. — Sonali, Oct 19 '16 at 09:30

Applying Css to content inside webview in javafx

1 Answers1