Issue
When I am testing this very sample program, the webview does not display the html page correctly.
- First page (first circle) is displayed correctly ! But ..
- It should change of page every 10s, it does not.
- It should display graphs (when you click on the second circle), it does not.
- 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 ?
Solution
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 provuded 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
Sample test page for ResizeObserver from Mozilla (I am not responsible for the weird text message in the sample):
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:
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:
- No error is displayed in the console regarding the ResizeObserver.
- The display automatically changes every 10 seconds.
- Graphs display when you click on the second circle.
- 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:
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();
}
}
Answered By - jewelsea