Can't load CSS/JS on javafx Webview

Question

I am having trouble getting css/js to show up on a Webview.

Here is what I am doing:

initializing the webview and engine

WebView browser = new WebView();
WebEngine webEngine = browser.getEngine();
webEngine.setJavaScriptEnabled(true);

This is where I load html content:

htmlViewImgBtn.addEventHandler(MouseEvent.MOUSE_CLICKED,
    new EventHandler<MouseEven
        @Override
        public void handle(MouseEvent event){

            if (counter == 0){
            contentContainer.getChildren().addAll(browser);
            webEngine.loadContent(export.getHTML(note));
            //browser.getEngine().load("http://stackoverflow.com/questions/34554583/cant-load-css-js-on-javafx-webview");
            contentContainer.getChildren().remove(noteContent);
            counter = 1;
           }

           else {
           contentContainer.getChildren().remove(browser);
           contentContainer.getChildren().addAll(noteContent);
           counter = 0;
           }
       }
});

Note: The commented code works when loading a website onto the webview, no issues. But Still does not work for the content I am loading.

The content (HTML) that is loaded looks looks like this:

<link href="prism.css" rel="stylesheet" type="text/css" />
<script src="prism.js" type="text/javascript"></script>
<pre><code class="language-java">System.out.println("Hello");
</code></pre>

Also, the css and js files are in the same directory as the java file

I can confirm that the html works by loading it on a web browser, What am I missing?

Alfredo Sequeida · Accepted Answer · 2016-01-01 22:16:21Z

2

Blockquote

I was able to get it working by modifying the html as such:

"<link href=\"" + getClass().getResource("./prism.css") + "\"" + " rel=\"stylesheet\"" + " type=\"text/css\"" +  " />\n" + 
"<script src=\"" + getClass().getResource("./prism.js") + "\"" + " type=\"text/javascript\"" + "></script>\n" +
(rest of html);

answered Jan 1, 2016 at 22:16

Alfredo Sequeida

538 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

itsyahani · Accepted Answer · 2016-01-01 10:19:05Z

1

You can use ResourceLoader to load HTML, js and css which are located in the same directory as the Java class.

    URL url = getClass().getResource("index.html");
    webEngine.load(url.toExternalForm());

answered Jan 1, 2016 at 10:19

itsyahani

4383 silver badges13 bronze badges

3 Comments

Alfredo Sequeida Over a year ago

I already tried that, with no luck. This seems to work if I load from a file; however, I am trying to load the html from memory, any ideas on how to get that to work?

itsyahani Over a year ago

Oh I see, then you'll need to format the html string a little. Something like this? webEngine.loadContent( "<script src='" + getClass().getResource("prism.js") + "' />");

Alfredo Sequeida Over a year ago

No luck, I made the changes you suggested for both the js and css files. Also, this seems to break the html when loaded on a web browser. This is how the html ends up rendering (to make sure I did note make any mistakes): <link href='file:/home/freddy/Documents/PappelProject2/prism.css' /> <script src='file:/home/freddy/Documents/PappelProject2/prism.js' /> <pre><code class="language-java">System.out.println("Hello"); </code></pre>

Collectives™ on Stack Overflow

Can't load CSS/JS on javafx Webview

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related