Java Swing webEngine.executeScript not firing within HTML Javafx webview

Question

Hey all I've been at this for awhile. I cannot seem to get it correct from all the examples i have seen so far. It seems it would be easy but I'm at a lose.

My HTML:

WebView webView = new WebView();

webView.getEngine().setJavaScriptEnabled(true);
webView.setContextMenuEnabled(false);
webView.getEngine().loadContent(""+
"<!DOCTYPE html>\r\n" + 
    "<html>\r\n" + 
        "<head>\r\n" + 
        "</head>\r\n" +
        "<body>" +
                    "<div class=\"chatbox\" style=\"document.body.style.overflow = 'hidden';\">\r\n" + 
                    "       <div class=\"chatlogs\">\r\n" + 
                    "           <div class=\"animated animatedFadeInUp fadeInUp\">" +
                    "                   <div class=\"chat friend\">\r\n" + 
                    "                   <div class=\"user-photo\"><img src=\"" + pic1 + "\"></div>\r\n" + 
                    "                   <p class=\"chat-message\">Whats up!</p>\r\n" + 
                    "                   <span class=\"timefriend\">11:01pm Oct 25 2019</span>\r\n" + 
                    "               </div>\r\n" + 
                    "           </div>" +
                    "           <div class=\"animated animatedFadeInUp fadeInUp\">" +
                    "               <div class=\"chat self\">\r\n" + 
                    "                   <div class=\"user-photo\"><img src=\"" + pic2 + "\"></div>" + 
                    "                   <p class=\"chat-message\">Not much yo!</p>\r\n" + 
                    "                   <span class=\"timeself\">11:01 PM | Oct 11 2019</span>\r\n" + 
                    "               </div>\r\n" + 
                    "           </div>\r\n" + 
                    "           <div class=\"animated animatedFadeInUp fadeInUp\">" +
                    "               <div class=\"chat friend\">\r\n" + 
                    "                   <div class=\"user-photo\"><img src=\"" + pic1 + "\"></div>" + 
                    "                   <p class=\"chat-message\">Whats up!</p>\r\n" + 
                    "                   <span class=\"timefriend\">11:01 PM | Oct 11 2019</span>\r\n" + 
                    "               </div>\r\n" + 
                    "           </div>\r\n" + 
                    "           <div class=\"animated animatedFadeInUp fadeInUp\">" +
                    "               <div class=\"chat friend\">\r\n" + 
                    "                   <div class=\"user-photo\"><img src=\"" + pic1 + "\"></div>" + 
                    "                   <p class=\"chat-message\">Whats up!</p>\r\n" + 
                    "                   <span class=\"timefriend\">11:01 PM | Oct 11 2019</span>\r\n" + 
                    "               </div>\r\n" + 
                    "           </div>\r\n" + 
                    "           <div id=\"nextChatHolder\"></div>" +
                    "       </div>\r\n" + 
                    "   </div>\r\n" +
                    "   <div class=\"footer\"></div>" + 
                    "   <script language=\"javascript\">\r\n" + 
                    "       function app.test() {\r\n" + 
                    "           window.scrollBy(0, 20); \r\n" + 
                    "           alert('done');\r\n" +
                    "       }\r\n" + 
                    "   </script>" +
                    "</body>\r\n" + 
                "</html>");

And this is the java I am using (and trying to get working):

webView.getEngine().getLoadWorker().stateProperty().addListener(new ChangeListener<State>()
            {
                public void changed(ObservableValue<? extends State> o, State old, final State state)
                {
                    if (state == State.SUCCEEDED)
                    {
                        JSObject win = (JSObject) webView.getEngine().executeScript("window");
                        win.setMember("app", new JavaApp());
                        //webView.getEngine().executeScript("javaObj.start()");
                    }
                }
            });

private class JavaApp {
        public void test() {
            Platform.exit();
        }
    }

I would think that doing:

function app.test() {\r\n" + 
    window.scrollBy(0, 20); \r\n" + 
    alert('done');\r\n" +
}

and calling it via:

webView.getEngine().executeScript("test()");

Not even this works...../

webView.getEngine().executeScript("alert('testing')");

Topaco · Accepted Answer · 2019-04-08 22:29:56Z

Calling a Java-method from JavaScript

For calling the Java-method JavaApp#test() from JavaScript, the most important part of the implementation is already included in your second code snippet. Only the call itself is still missing, e.g.

<button onclick='app.test();'>Call JavaApp#test-method</button>

However, two important things must be taken into account: First, the nested class JavaApp must be public. Second, the application must hold a reference to the JavaApp-instance which is needed for the callback from JavaScript to execute the method (see here, section Calling back to Java from JavaScript).

Thus you've to modify your code as follows:

JavaApp javaApp = new JavaApp();             // Hold a reference...
webView.getEngine().getLoadWorker().stateProperty().addListener(new ChangeListener<State>() {
    public void changed(ObservableValue<? extends State> o, State old, final State state) {
        if (state == State.SUCCEEDED) {
            JSObject win = (JSObject) webView.getEngine().executeScript("window");
            win.setMember("app", javaApp);   // Use the reference...
        }
    }
});

and

public class JavaApp {                       // Change the access modifier from private to public...
    public void test() {
        Platform.exit();
    }
}

Calling a JavaScript-method from Java

If you want to call a JavaScript method from Java, e.g. test(), this is done with

webView.getEngine().executeScript("test()");

As an example I use the test()-method given in your third snippet, where however the name must be changed from app.test() to test(). If webView.getEngine().executeScript("test()"); is called, test() is executed with the exception of the alert()-method. This is because for some JavaScript-methods (like window.alert()) the WebEngine forwards the request to a callback (onAlert in the case of window.alert()). If the callback isn't defined, the request is ignored (see here, section User Interface Callbacks). E.g., the callback for alert() can be defined as follows:

webView.getEngine().setOnAlert(event -> showAlert(event.getData()));

where showAlert(String msg) is a custom method and msg contains the original message (done in the case of your test()-method), e.g.:

private void showAlert(String msg){
    Alert alert = new Alert(AlertType.INFORMATION);
    alert.setTitle("Custom Alert");
    alert.setHeaderText("");
    alert.setContentText(msg);
    alert.showAndWait();
}

You can find more examples in How can I make JavaFX web browser displays alert and confirm message.

EDIT:

Example-code for the calling of a Java-method from JavaScript: When the button is pressed, the Java-method JavaApp#test() is called from JavaScript, which outputs the text done in a textarea.

import javafx.application.Application;
import javafx.concurrent.Worker.State;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.TextArea;
import javafx.scene.layout.VBox;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
import netscape.javascript.JSObject;

public class WebViewExecuteJavaFromJavaScript extends Application {

    private TextArea textArea;

    private static String HTML_STRING = "" +
        "<!DOCTYPE html>\r\n" + 
        "<html>\r\n" + 
        "    <head>\r\n" + 
        "    </head>\r\n" +
        "    <body>" +
        "        <button onclick='app.test();'>Call Java-method JavaApp#test()...</button>" +    // Call Java-method JavaApp#test()...
        "    </body>\r\n" + 
        "</html>";

    @Override
    public void start(final Stage stage) {

        WebView webView = new WebView();
        WebEngine webEngine = webView.getEngine();
        webEngine.setJavaScriptEnabled(true);
        webEngine.loadContent(HTML_STRING);

        JavaApp javaApp = new JavaApp();    
        webEngine.getLoadWorker().stateProperty().addListener((o, oldState, newState) -> {
            if (newState == State.SUCCEEDED) {
                JSObject win = (JSObject) webView.getEngine().executeScript("window");
                win.setMember("app", javaApp);                                                   // Enable call of Java-method from JavaScript...
            }
        });

        textArea = new TextArea();
        textArea.setWrapText(true);

        VBox root = new VBox();
        root.setPadding(new Insets(5));
        root.setSpacing(5);
        root.getChildren().addAll(webView, textArea);

        Scene scene = new Scene(root); 
        stage.setTitle("Demo: Execute Java from JavaScript");
        stage.setScene(scene);
        stage.setWidth(450);
        stage.setHeight(300); 
        stage.show();
    }

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

    public class JavaApp {
        public void test() {
            textArea.setText(textArea.getText() + "done ");
        }
    }
}

Example-code for the calling of a JavaScript-method from Java: When the button is pressed, the JavaScript-method test() is called from Java, which outputs the text done in a textarea and in a dialog.

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Alert;
import javafx.scene.control.Alert.AlertType;
import javafx.scene.control.Button;
import javafx.scene.layout.VBox;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;

public class WebViewExecuteJavaScriptFromJava extends Application {

    private static String HTML_STRING = "" +
        "<!DOCTYPE html>\r\n" + 
        "<html>\r\n" + 
        "    <head>\r\n" + 
        "    </head>\r\n" +
        "    <body>" +
        "        <textarea id=\"textarea\" name=\"textarea\" cols=55 rows=3 wrap=\"virtual\"></textarea>" + 
        "        <script language=\"javascript\">\r\n" + 
        "            function test() {\r\n" + 
        "                textarea.value+='done '; \r\n" + 
        "                alert('done');\r\n" +                                      // Is ignored as long as no callback is defined...
        "            }\r\n" + 
        "        </script>" +
        "    </body>\r\n" + 
        "</html>";

    @Override
    public void start(final Stage stage) {

        WebView webView = new WebView();
        WebEngine webEngine = webView.getEngine();
        webEngine.setJavaScriptEnabled(true);
        webEngine.loadContent(HTML_STRING);
        webEngine.setOnAlert(event -> showAlert(event.getData()));                  // Define callback for JavaScript-alert...

        Button button = new Button("Call JavaScript-method test()...");
        button.setOnAction(event -> webView.getEngine().executeScript("test()"));   // Call JavaScript-method test()...

        VBox root = new VBox();
        root.setPadding(new Insets(5));
        root.setSpacing(5);
        root.getChildren().addAll(button, webView);

        Scene scene = new Scene(root); 
        stage.setTitle("Demo: Execute JavaScript from Java");
        stage.setScene(scene);
        stage.setWidth(450);
        stage.setHeight(300); 
        stage.show();
    }

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

    private void showAlert(String msg){
        Alert alert = new Alert(AlertType.INFORMATION);
        alert.setTitle("Custom Alert");
        alert.setHeaderText("");
        alert.setContentText(msg);
        alert.showAndWait();
    }
}

It seems not to call out to the javascript. I placed a button on the html page that called the same function (test()) and when i start it up it does nothing but if i click on the button then it displays the alert box from java. I need to be able to call that test() function within my app and have it fired off.
I would recommend not to use the JavaScript-alert for the initial testing, as it only works after the implementation of the setOnAlert/showAlert-stuff. Use another output, e.g. in a textarea or something like that. The alert-callback can be implemented later (if it is needed at all) if the JavaFX->JavaScript call itself works. Actually, the implementation is not very complex. Maybe we are talking at cross purposes or in your environment there is an additional problem. I think the easiest way is to post my testcode, which runs without any problems on my machine.

Collectives™ on Stack Overflow

Java Swing webEngine.executeScript not firing within HTML Javafx webview

1 Answer 1

Calling a Java-method from JavaScript

Calling a JavaScript-method from Java

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Calling a Java-method from JavaScript

Calling a JavaScript-method from Java

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related