JavaFX 使用 JavaScript 调用 Java 方法

问题描述 投票：0回答：2

我的应用程序完全采用 Web 文档形式（HTML、CSS 和 JavaScript）设计样式，并且我仅使用 JavaFX WebView 将其作为普通资源加载。

我想使用 JavaScript 从我的一个类（Java 代码）调用方法。

例如，向控制台发送一个简单的 Hello World：

public class Hello {
  public void world() {
    System.out.println("Hello World!");
  }
}

在这种情况下如何调用 

world()
方法？

所以我的页面代码是这样的：

<!-- onlick action from a button calls hello() function -->
<button onclick="hello();" value="Invoke"></button>

<script>
  function hello() {
    /* CODE WHICH INVOKE A JAVA METHOD */
  }
</script>

有什么办法可以实现这个目标吗？

更新

注意：对于那些正在寻找有关如何实现此目标的完整且简单示例的人，您可以测试下面编写的所有以下代码。

感谢 @Oshan_Mendis 先生的回答，我终于实现了我的目标。此示例基于 Oracle 文档中的本教程：6 从 JavaScript 到 JavaFX 的上行调用。

但是在这里，我将使用自己的代码，主要目标是使用 HTML 页面中的 JavaScript 调用 Java 代码中的方法。

文件内容：

Controller.java   /* Controller class for WebView */
Hello.java        /* Class in which method(s) will be invoked */
Main.java         /* Main class (launches the application) */
main.fxml         /* Main layout (WebView) */
index.html        /* Main layout web page content */

1.创建主类（Main.java）

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Main extends Application {
  @Override
  public void start(Stage stage) throws Exception {
    /* The root layout of the application, an FXML contains the WebView layout. */
    Parent root = FXMLLoader.load(Main.class.getResource("/main.fxml"));
    Scene scene = new Scene(root);
    stage.setScene(scene);
    stage.show();
  }
  public static void main(String[] args) {
    launch(args);
  }
}

2.准备主布局（main.fxml）

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.web.WebView?>
<?import javafx.scene.layout.VBox?>

<VBox xmlns="http://javafx.com/javafx/8"
      xmlns:fx="http://javafx.com/fxml/1"
      fx:controller="Controller"  <!-- The controller class for this layout -->
      prefHeight="400.0"
      prefWidth="300.0">
  <children>
    <!-- Given the webView ID to initiate the web page -->
    <WebView fx:id="webView" />
  </children>
</VBox>

3.设置网页（Controller.java）

import java.net.URL;
import java.util.ResourceBundle;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.concurrent.Worker.State;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import netscape.javascript.JSObject;

public class Controller implements Initializable {
  private WebEngine webEngine;
  @FXML private WebView webView;
  @Override
  public void initialize(URL location, ResourceBundle resources) {
    /* Load the web page URL (location of the resource) */
    URL url = Controller.class.getResource("/index.html");
    webEngine = webView.getEngine();
    webEngine.load(url.toExternalForm());
    /* Set the State listener as well as the name of the JavaScript object and its
     * corresponding Java object (the class in which methods will be invoked) that
     * will serve as the bridge for the two objects.
     */
    webEngine.getLoadWorker().stateProperty().addListener(new ChangeListener<State>() {
      @Override
      public void changed(ObservableValue<? extends State> observableValue, State oldState, State newState) {
        if (newState == State.SUCCEEDED) {
          JSObject window = (JSObject) webEngine.executeScript("window");
          /* The two objects are named using the setMember() method. */
          window.setMember("invoke", new Hello());
        }
      }
    });
  }
}

4.首选类及其调用方法 (Hello.java)

public class Hello {
  public void world() {
    System.out.println("Hello World!");
  }
}

5.主要布局网页内容（index.html）

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
      function helloWorld() {
        /* JavaScript object name and the method to invoke */
        invoke.world();
      }
    </script>
  </head>
  <body>
    <!-- onlick event calls helloWorld() function -->
    <button onclick="helloWorld()">INVOKE</button>
  </body>
</html>

注意： 在这种情况下，您可以执行除 onclick 事件之外的其他与鼠标相关的事件，例如：onmouseenter、onmouseover、onmousemove、onmouseup 等。但我不确定这些是否是调用方法唯一支持的事件.

javascript java javafx
2个回答
5
投票

这在 Java API 文档 下的 从 JavaScript 回调到 Java

中有很好的解释 
public class JavaApplication {
    public void exit() {
        Platform.exit();
    }
}
...
JavaApplication javaApp = new JavaApplication();
JSObject window = (JSObject) webEngine.executeScript("window");
window.setMember("app", javaApp);

然后您可以从 HTML 页面引用该对象和方法：

<a href="" onclick="app.exit()">Click here to exit application</a>
0
投票

此外，我们需要将 JavaApplication 类与 Web 引擎配置添加的类放在同一个包中。在其他情况下，js 无法调用函数（或访问任何公共字段）。我花了 1 天才弄清楚。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.