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

score 5 · Accepted Answer · answered May 15 '14 at 18:40

5

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") + "'");

answered May 15 '14 at 18:40

Uluk Biy

48,655
13
146
153

2

[I just found out](http://stackoverflow.com/questions/20164062/how-to-load-both-html-and-javascript-into-webengine-from-loadcontent/26488496#26488496) that using a `` tag is the trick to load relative resources with `loadContent(String)`. I searched quite long for such a solution so I wanted to share it. :) – Huxi Oct 21 '14 at 14:04

score 1 · Answer 2 · answered May 15 '14 at 16:20

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

I have placeholders in the html that I replace with before I display the actual HTML on the page. Loading the file directly doesn't work. I have updated the question. — Get Off My Lawn, May 15 '14 at 16:31
To me, I can load the css specified inside the html file when I run the above code in eclipse. However, when I compile it to a jar file and run it, it doesn't work. I think it has to do with the problem of finding the path of the css file inside the jar file. — mk7, Apr 27 '16 at 02:19
@mk7 Copying resources to your jar depends on how your project configured. I think creating a new question with necessary data will be of great help. — ItachiUchiha, Apr 27 '16 at 06:40
awesome. it worked. `String url = getClass().getResource("test.html").toExternalForm(); webView.getEngine().load(url);` this did the trick — Vishrant, Aug 29 '17 at 01:29

javafx webview load local css files

2 Answers2