JavaFX WebView中的Javascript

Question

我是Java和JavaFX的新手，我只是想知道JavaFX的webview是否可以运行javascript本身，除了它与java代码的通信之外。例如，当窗口加载时，我可以在webview中运行javascript警报语句，并在webview中实际获得警报，就像在普通浏览器中一样。我知道我可以通过以下方式使用我的java代码捕获此警报事件

<代码>Web引擎。setOnAlert设置

但我实际上希望javascript事件在webview窗口本身中发生，就像在普通浏览器中一样。

我之所以问这个简单的问题，是因为我正在使用一个带有文本区域的webview，我想在其中启用拼写检查。我有一个javascript拼写检查器，它在普通浏览器中工作得很好，当我键入错误的内容时，会得到红色下划线，但我希望它也能在JavaFX webview中工作。

我很感激我能得到的任何帮助！

Answer 1

WebView JavaScript回调处理程序示例

下面是一些基于JavaScript触发器命令显示JavaFX对话框的示例代码。示例代码用于JavaScript确认处理程序，但警报处理程序的代码的功能类似。

在示例屏幕截图中，左侧的黄色条将显示一个JavaFX标签，该标签基于从覆盖屏幕其余部分的WebView调用的JavaScript函数触发的确认对话框的结果。

确认对话框在JavaFX中呈现在WebView的顶部，防止在显示对话框时与WebView交互。确认对话框的样式只是一个示例，它可以按照您希望的任何方式使用css进行样式设置，布局也可以在代码中更改（或者您可以在FXML标记中定义对话框布局，如果您愿意的话）。

WebViewConfirm。Java语言

import javafx.application.Application;
import javafx.beans.property.BooleanProperty;
import javafx.beans.property.SimpleBooleanProperty;
import javafx.event.*;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.effect.BoxBlur;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.*;
import javafx.scene.paint.Color;
import javafx.scene.web.WebView;
import javafx.stage.*;
import javafx.util.Callback;

/**
 * Demonstrates a modal WebView confirm box in JavaFX.
 * Dialog is rendered upon a blurred background.
 * Dialog is translucent.
 * Requires JavaFX 2.2
 * To test, run the program, then click the "Try it" button in the Result textarea.
 */
public class WebViewConfirm extends Application {
  public static void main(String[] args) { launch(args); }
  @Override public void start(final Stage primaryStage) {
    // initialize the stage
    primaryStage.setTitle("Modal Confirm Example");
    final WebView webView = new WebView();
    webView.getEngine().load("http://www.w3schools.com/js/tryit.asp?filename=tryjs_confirm");

    // layout the stage - a vbox to show confirmation results and a webview to generate confirmations.
    final VBox confirmationResults = new VBox();
    confirmationResults.getStyleClass().add("confirmation-results");
    confirmationResults.setMinWidth(150);
    HBox layout = new HBox();
    layout.getChildren().addAll(confirmationResults, webView);
    primaryStage.setScene(new Scene(layout));
    primaryStage.show();
    primaryStage.getScene().getStylesheets().add(getClass().getResource("modal-dialog.css").toExternalForm());

    // show the confirmation dialog each time a new page is loaded and
    // record the confirmation result.
    webView.getEngine().setConfirmHandler(new Callback<String, Boolean>() {
      @Override public Boolean call(String msg) {
        Boolean confirmed = confirm(primaryStage, msg);
        confirmationResults.getChildren().add(new Label("Confirmed? " + confirmed));
        return confirmed;
      }
    });
  }

  private Boolean confirm(final Stage parent, String msg) {
    final BooleanProperty confirmationResult = new SimpleBooleanProperty();
    // initialize the confirmation dialog
    final Stage dialog = new Stage(StageStyle.TRANSPARENT);
    dialog.initOwner(parent);
    dialog.initModality(Modality.WINDOW_MODAL);
    dialog.setScene(
      new Scene(
        HBoxBuilder.create().styleClass("modal-dialog").children(
          LabelBuilder.create().text(msg).build(),
          ButtonBuilder.create().text("OK").defaultButton(true).onAction(new EventHandler<ActionEvent>() {
            @Override public void handle(ActionEvent actionEvent) {
              // take action and close the dialog.
              confirmationResult.set(true);
              parent.getScene().getRoot().setEffect(null);
              dialog.close();
            }
          }).build(),
          ButtonBuilder.create().text("Cancel").cancelButton(true).onAction(new EventHandler<ActionEvent>() {
            @Override public void handle(ActionEvent actionEvent) {
              // abort action and close the dialog.
              confirmationResult.set(false);
              parent.getScene().getRoot().setEffect(null);
              dialog.close();
            }
          }).build()
        ).build()
        , Color.TRANSPARENT
      )
    );

    // allow the dialog to be dragged around.
    final Node root = dialog.getScene().getRoot();
    final Delta dragDelta = new Delta();
    root.setOnMousePressed(new EventHandler<MouseEvent>() {
      @Override public void handle(MouseEvent mouseEvent) {
        // record a delta distance for the drag and drop operation.
        dragDelta.x = dialog.getX() - mouseEvent.getScreenX();
        dragDelta.y = dialog.getY() - mouseEvent.getScreenY();
      }
    });
    root.setOnMouseDragged(new EventHandler<MouseEvent>() {
      @Override public void handle(MouseEvent mouseEvent) {
        dialog.setX(mouseEvent.getScreenX() + dragDelta.x);
        dialog.setY(mouseEvent.getScreenY() + dragDelta.y);
      }
    });

    // style and show the dialog.
    dialog.getScene().getStylesheets().add(getClass().getResource("modal-dialog.css").toExternalForm());
    parent.getScene().getRoot().setEffect(new BoxBlur());
    dialog.showAndWait();

    return confirmationResult.get();
  }

  // records relative x and y co-ordinates.
  class Delta { double x, y; }
}

模态对话框。css

/**
 * modal-dialog.css
 * place in same directory as WebViewConfirm.java
 * ensure your build system copies the file to your build output directory
 */

.root {
  -fx-glass-color: rgba(95, 158, 160, 0.9);
}

.modal-dialog {
  -fx-padding: 20;
  -fx-spacing: 10;
  -fx-alignment: center;
  -fx-font-size: 20;
  -fx-background-color: linear-gradient(to bottom, derive(-fx-glass-color, 20%), -fx-glass-color);
  -fx-border-color: derive(-fx-glass-color, -20%);
  -fx-border-width: 5;
  -fx-background-insets: 12;
  -fx-border-insets: 10;
  -fx-border-radius: 6;
  -fx-background-radius: 6;
}

.modal-dialog:pressed {
  -fx-cursor: move;
}

.modal-dialog .button:pressed {
  -fx-cursor: default;
}

.confirmation-results {
  -fx-background-color: cornsilk;
  -fx-padding: 5;
}

您问题的可能答案

我不太清楚你的问题，但我认为如果你弹出一个ControlsFX对话框，你会实现你想要的。您可以使用标准对话框（其功能类似于Internet Explorer的JavaScript警报对话框）或轻量级对话框（其功能类似于Firefox的JavaScript警报对话框）-有关详细信息，请参阅ControlsFX功能页面。

ControlsFX基于Java 8，但对于JavaFX 2.2，有许多关于在JavaFX中显示对话框的StackOverflow主题（例如：如何在JavaFX 2.0中创建和显示公共对话框（错误、警告、确认））。上面的示例代码是JavaFX 2.2中对话框用法的一个示例

对你问题中提出的补充意见的评论

如果JavaFX的webview可以在与java代码通信之外运行javascript

是的，WebView可以处理JavaScript。

例如，我可以在加载窗口时在webview中运行javascript警报语句，并在webview中实际获得警报，就像在普通浏览器中一样。

是的，如果您为WebView设置了警报处理程序，使其功能类似于“普通浏览器”，则在接收JavaScript警报命令时会弹出一个对话框。请注意，“普通浏览器”不会基于JavaScript警报功能修改网页文档对象模型，而是弹出一个本机对话框-该对话框实际上不是网页的一部分。

实际上，我希望javascript事件像在普通浏览器中一样发生在webview窗口中。

“普通”浏览器根据其UI模型处理警报的方式不同。例如，在Firefox中，警报对话框将显示在当前浏览器选项卡窗口中，在Internet Explorer中，警报对话框将显示在Internet Explorer窗口的上方。JavaFX警报处理程序非常灵活，您可以根据需要处理警报。