javafx webview does not display correctly an html page

Question

When I am testing this very sample program, the webview does not display the html page correctly.

1. First page (first circle) is displayed correctly ! But ..
2. It should change of page every 10s, it does not.
3. It should display graphs (when you click on the second circle), it does not.
4. It should display display images (when you click on the third circle) it does not.

Here is my config : openjdk-17

<dependency>
    <groupId>org.openjfx</groupId>
    <artifactId>javafx-controls</artifactId>
    <version>17.0.0.1</version>
</dependency>
<dependency>
    <groupId>org.openjfx</groupId>
    <artifactId>javafx-web</artifactId>
    <version>17.0.0.1</version>
</dependency>
<dependency>
    <groupId>org.openjfx</groupId>
    <artifactId>javafx-fxml</artifactId>
    <version>17.0.0.1</version>
</dependency>

Code

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

public class Main extends Application {
    @Override
    public void start(final Stage pStage) {
        WebView lWebView = new WebView();

        lWebView.getEngine().setJavaScriptEnabled(true);
        lWebView.getEngine().load("http://it-topics.com/index3.html");
        
        VBox lVBox = new VBox(lWebView);

        pStage.setScene(new Scene(lVBox));
        pStage.show();
    }

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

My overall point is to make the webview work the same as it would a browser. Any idea to fix points 2, 3 and 4 ?

Answer 1

Background on Test Environment

I ran some experimentations to determine what is causing (at least some of) your reported issues with the display of your provided page.

For my tests I was using JavaFX 17.0.0.1 running Eclipse Temurin 17 JDK and Windows 10 Pro OS on MS Surface Book 2.

The sample webpage from your question displayed in Chrome 94 without the issues you note in your question, and in JavaFX WebView experienced the issues you note in your question.

To debug the issue, I added a console listener to the web engine, as demonstrated in the most popular answers to:

• How to get the JavaFx WebEngine to report errors in detail?
• WebConsoleListener IllegalAccessError in JavaFX 12

Once I did so, I saw the following error logged to the console:

Console: [https://cdn.jsdelivr.net/npm/chart.js:13] ReferenceError: Can't find variable: ResizeObserver

Information on ResizeObserver

Doing some research I could see that the ResizeObserver implementation isn't available for all browser implementations. So I guess it isn't implemented in WebView.

Information on ResizeObserver from Mozilla

• https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver

Sample test page for ResizeObserver from Mozilla (I am not responsible for the weird text message in the sample):

• https://mdn.github.io/dom-examples/resize-observer/resize-observer-text.html

Loading the sample page from mozilla in WebView confirms the issue with lack of support for ResizeObserver, with the following error printed when the WebConsoleListener is attached:

Console: [https://mdn.github.io/dom-examples/resize-observer/resize-observer-text.html:110] Resize observer not supported!

How to fix it

You can add the ResizeObserver ability to WebView (or other browsers which do not support the feature) via a polyfill.

The best way to fix it is to request the developers of the website you are using to integrate a polyfill for ResizeObserver into their website to allow it to be used on a wider variety of clients.

An example polyfill which fixes the issue is:

• ResizeObserver polyfill.

If you download the source for the website you are using and import the polyfill JavaScript in the page before other items, then, most of the issues you reference in your question go away and work as expected on WebView:

1. No error is displayed in the console regarding the ResizeObserver.
2. The display automatically changes every 10 seconds.
3. Graphs display when you click on the second circle.
4. An image displays when you click on the third circle (though the image is larger than what I see on Chrome and clipped).

Polyfill javascript source for ResizeObserver:

• https://github.com/que-etc/resize-observer-polyfill/blob/master/dist/ResizeObserver.js

Filing a feature request for ResizeObserver support for JavaFX WebView

If you wish, you can file a feature request for the JavaFX WebView requesting resize observer support.

To do so, you could subscribe to the openjfx-dev mailing list and post a message about this there, linking back to this question.

Or, file a bug report against JavaFX. If you do so, I'd advise referencing the mozilla resize observer test page and associated documentation rather than the test page in your original question.

Test Code

Must be run using the information from: this answer to allow access to an internal com.sun.javafx implementation.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.web.WebEngine;
import javafx.stage.Stage;
import javafx.scene.layout.VBox;
import javafx.scene.web.WebView;
import com.sun.javafx.webkit.WebConsoleListener;

public class WebViewPageLoad extends Application {
    @Override
    public void start(final Stage stage) {
        WebView webView = new WebView();
        WebEngine engine = webView.getEngine();

        engine.getLoadWorker().exceptionProperty().addListener((ov, t, t1) ->
                System.out.println("Received exception: "+t1.getMessage())
        );

        WebConsoleListener.setDefaultListener((webViewReference, message, lineNumber, sourceId) ->
                System.out.println("Console: [" + sourceId + ":" + lineNumber + "] " + message)
        );

// test page from original question:        
        engine.load("http://it-topics.com/index3.html");
// test page for resize observer polyfill (functions as expected).        
//        engine.load("https://que-etc.github.io/resize-observer-polyfill/");
// canonical ResizeObserver test page from mozilla.        
//        engine.load("https://mdn.github.io/dom-examples/resize-observer/resize-observer-text.html");
// referencing a local hacked version of the it-topics.com index3.html.
//        engine.load(WebViewPageLoad.class.getResource("it.html").toExternalForm());

        VBox layout = new VBox(webView);

        stage.setScene(new Scene(layout));
        stage.show();
    }

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