如何在 WebEngine 中从 javascript 调用 JavaFX 的 UI 变量？

Question

我正在开发一个应用程序，它需要根据用户输入（在 ComboBox 中）读取本地文件并将其显示在 WebView 中。我正在尝试从 JavaScript 调用 JavaFX UI 中的变量，但它不起作用。

我在 Java 代码中创建了一个名为 getMonthIndex() 的函数，该函数 returns ComboBox 的输入并且应该以适当的名称接收文件。我正在尝试将此函数导入到 JavaScript 代码中，但它似乎并未包含在 JavaScript 代码中。

如果你能向我解释如何从 JavaFX UI 获取参数并在 Java 脚本代码中使用它。

非常感谢您提供的任何帮助。

我的Controller.java:

public class Controller {

    ObservableList<String> months = FXCollections.observableArrayList
                    ("Tishrei", "Cheshvan", "Kislev", "Tevet", "Shevat", "Adar",
                    "Nisan", "Iyar", "Sivan", "Tammuz", "Av", "Elul");

    public ComboBox<String> month;
    public WebView webView;

    public String getMonthIndex() {
        ReadOnlyIntegerProperty listIndex = month.getSelectionModel().selectedIndexProperty();
        return String.format("%02d", listIndex.getValue());
    }

    public long linesCount(String scanFile) {
        if (scanFile.length() < 80) {
            return scanFile.length() / 15;
        } else {
            return scanFile.length() / 24;
        }
    }

    @FXML
    public void initialize() {
        month.setItems(months);

        webView.setContextMenuEnabled(false);

        WebEngine webEngine = webView.getEngine();
        Controller controller = new Controller();
        JSObject win = (JSObject) webEngine.executeScript("window");
        win.setMember("app", controller);

        month.setOnAction(event -> {
            String loadFile = this.getClass().getResource("index.html").toString();
            webEngine.load(loadFile);
        });
    }
}

我的index.html（由WebEngine上传）：

<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>

    <body onload="readTextFile()">
        <div id="text">
        </div>
        <script type="text/javascript">
            function readTextFile() {
                var xhr, i, text, lines;
                xhr = new XMLHttpRequest();
                xhr.open('GET', app.getMonthIndex()+'.txt', true);
                xhr.send(null);
                xhr.onreadystatechange = function(){
                    text = xhr.responseText;
                    lines = text.split("\n");
                    var allText = "";
                    for(i = 0; i < lines.length; i++){
                        allText += lines[i]+"<br>";
                    }
                    document.getElementById("text").innerHTML = allText;
                }
            }
        </script>
    </body>
</html>

Answer 1

您正在创建 Controller 的新实例，它与 UI 没有任何联系，并将其传递给网络引擎：

    Controller controller = new Controller();
     JSObject win = (JSObject) webEngine.executeScript("window");
    win.setMember("app", controller);

相反，只传递当前实例：

    // Controller controller = new Controller();
    JSObject win = (JSObject) webEngine.executeScript("window");
    win.setMember("app", this);

如何在 WebEngine 中从 javascript 调用 JavaFX 的 UI 变量？

How to Call to a UI variable of JavaFX from javascript in WebEngine?

javascript

java

javafx

javafx-webengine