如何在 JavaFX 应用程序中处理 HTML 表单答案

【问题标题】：How to handle HTML form in JavaFX application如何在 JavaFX 应用程序中处理 HTML 表单
【发布时间】：2015-09-18 13:08:18
【问题描述】：

有人可以帮助我如何在 JavaFX 中捕获 HTML 按钮的 onclick 事件吗？应该显示该按钮的 onClick javascript 警报，我可以在小程序窗口上显示 HTML 页面，但 onclick 事件不起作用

HTML：

<html lang="en">
<head>
    <title>WebView</title>
    <link rel="stylesheet" type="text/css" href="help.css">
    <script>
        function buttonClick() {
            alert("Button Clicked");
        }
    </script>
</head>
<body>

<button onclick="buttonClick()">Submit</button>

</body>
</html>

下面是我的 JavaFX 代码：

public class WebViewSample extends Application {

    private Scene scene;

    @Override
    public void start(Stage stage) {
        // create scene
        stage.setTitle("WebView");
        scene = new Scene(new Browser(), 750, 500, Color.web("#666970"));
        stage.setScene(scene);
        // apply CSS style
        //scene.getStylesheets().add("webviewsample/BrowserToolbar.css");        
        // show stage
        stage.show();
    }

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

class Browser extends Region {

    private HBox toolBar;
    private static String[] imageFiles = new String[]{
        "help.png"
    };
    private static String[] captions = new String[]{
        "Help"
    };
    private static String[] urls = new String[]{
        WebViewSample.class.getResource("help.html").toExternalForm()
    };    

    final Hyperlink[] hpls = new Hyperlink[captions.length];
    final Image[] images = new Image[imageFiles.length];
    final WebView browser = new WebView();
    final WebEngine webEngine = browser.getEngine();        
    final ComboBox comboBox = new ComboBox();   

    public Browser() {
        //apply the styles
        getStyleClass().add("browser");

        for (int i = 0; i < captions.length; i++) {
            // create hyperlinks
            Hyperlink hpl = hpls[i] = new Hyperlink(captions[i]);
            Image image = images[i] =
                    new Image(getClass().getResourceAsStream(imageFiles[i]));
            hpl.setGraphic(new ImageView(image));
            final String url = urls[i];

            hpl.setOnAction(new EventHandler<ActionEvent>() {
                @Override
                public void handle(ActionEvent e) {                  
                    webEngine.executeScript("url");
                }
            });


        }

        comboBox.setPrefWidth(60);

        // create the toolbar
        toolBar = new HBox();
        toolBar.setAlignment(Pos.CENTER);
        toolBar.getStyleClass().add("browser-toolbar");
        toolBar.getChildren().add(comboBox);
        toolBar.getChildren().addAll(hpls);
        toolBar.getChildren().add(createSpacer());

        //add components
        getChildren().add(toolBar);
        getChildren().add(browser);
    }    

    private Node createSpacer() {
        Region spacer = new Region();
        HBox.setHgrow(spacer, Priority.ALWAYS);
        return spacer;
    }

    @Override
    protected void layoutChildren() {
        double w = getWidth();
        double h = getHeight();
        double tbHeight = toolBar.prefHeight(w);
        layoutInArea(browser,0,0,w,h-tbHeight,0,HPos.CENTER,VPos.CENTER);
        layoutInArea(toolBar,0,h-tbHeight,w,tbHeight,0,HPos.CENTER,VPos.CENTER);
    }

    @Override
    protected double computePrefWidth(double height) {
        return 750;
    }

    @Override
    protected double computePrefHeight(double width) {
        return 600;
    }
}

【问题讨论】：

标签： webview javafx-2 javafx-8 javafx-webengine

【解决方案1】：

您没有看到任何内容的原因是您没有为webEngine 定义onAlert 处理程序。尝试最简单的方法：

    // in the constructor of `Browser`
    webEngine.setOnAlert((WebEvent<String> event) -> {
        System.out.println("ALERT!!!! " + event.getData());
    });

这将在标准输出中打印警报。这也意味着事件被实际捕获。

如果您想从此事件中调用 Java 代码，则必须阅读 this （编辑 2017/08/06：链接现已消失；this 是我能找到的最接近的）。简而言之：

制作一个包含你要调用的代码的对象，例如：

public class Bridge {
    public void doSomething() {
        ...
    }
}

将它放在页面上下文中：

JSObject jsobj = (JSObject) webEngine.executeScript("window");
jsobj.setMember("bridge", new Bridge());

从 JS 事件处理程序调用它：

function buttonClick() {
    bridge.doSomething();
}

当您不再需要网桥将其移除时，请使用 JSObject.removeMember()
注意安全！

【讨论】：

嗨 Nikos，我还有一个疑问，如果我有 2 个按钮和 2 个不同的 JavaScript 函数，我该如何区分它们？
同理；例如创建另一个对象，Bridge2，-或- 在 Bridge 等中创建一个新方法 doSomethingElse() 等...
谢谢尼科斯。 1. 如果我有一个像这样的文本框，你能告诉我如何检索表单字段吗？
2.请问如何从一个页面导航到另一个页面？这可以解决我所有的疑问。
对于 (1) 您需要标准的 Javascript 操作 - 如果不确定最好再问一个问题。 (2) 也是另一个问题，您应该提供更多关于您想要什么的详细信息。标准 HTML 链接在许多情况下都可以使用...