javafx webview load local css files


Question

I have a WebView, which loads a local html file that I have saved within my project. I use the following to load the file:

InputStream is = Browser.class.getResourceAsStream(location);
String str = "";
int i;
while((i = is.read()) != -1){
    str += (char)i;
}

str = str.replace("{placeholder_1}", value1);
str = str.replace("{placeholder_2}", value2);


webEngine.loadContent(str);

In the HTML I have a link to a css file. The HTML file and the css file are in the same directory, but the css file isn't loading when the page loads in the WebView. Here is how I am calling the css file from the HTML:

<link rel="stylesheet" href="main.css" />

Why is the file not loading? According to others, this is how they are doing it and it is working. Why is it not working for me, what am I doing wrong?

Here is the directory layout:

Directory Listing

1
2
5/15/2014 4:32:37 PM

Accepted Answer

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") + "'");
3
5/15/2014 6:40:45 PM

The following thing is working for me

Project Structure

Application
|
 src
    |
    package
           |
           WebViewLoadLocalFile.java
           test.html
           test.css

WebViewLoadLocalFile

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;
import javafx.scene.web.WebView;
import javafx.stage.Stage;

public class WebViewLoadLocalFile extends Application {

    @Override
    public void start(Stage stage) throws Exception {
        BorderPane borderPane = new BorderPane();
        WebView webView = new WebView();
        String url = getClass().getResource("test.html").toExternalForm();
        webView.getEngine().load(url);
        borderPane.setCenter(webView);
        final Scene scene = new Scene(borderPane);
        stage.setScene(scene);
        stage.setHeight(300);
        stage.setWidth(250);
        stage.show();

    }

    public static void main(String[] args) {
        launch(args);
    }
}

test.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=US-ASCII">
<title>Insert title here</title>
<link rel="stylesheet" href="test.css" />
</head>
<body>
Test HTML
</body>
</html>

test.css

body
{
  background-color:#d0e4fe;
}

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Icon