[英]Javascript in JavaFX WebView
我是Java和JavaFX的新手,我只是想知道JavaFX的webview是否可以自己運行javascript,除了它與java代碼的通信。 例如,我可以在窗口加載時在webview中運行javascript警告語句,並在webview中實際獲得警報,就像在普通瀏覽器中一樣。 我知道我可以用我的java代碼捕獲這個警報事件
webEngine.setOnAlert
但我實際上希望javascript事件發生在webview窗口本身,就像在普通瀏覽器中一樣。
我問這個簡單問題的原因是因為我正在使用帶有textarea的webview,我想啟用拼寫檢查。 我有一個javascript拼寫檢查程序,在普通瀏覽器中完美運行,當我輸入錯誤時我得到紅色下划線,但我也想讓它在JavaFX webview中工作。
我很感謝能得到任何幫助!
WebView JavaScript回調處理程序示例
以下是一些基於JavaScript觸發器命令顯示JavaFX對話框的示例代碼 。 示例代碼用於JavaScript確認處理程序,但警報處理程序的代碼功能類似。
在示例屏幕截圖中,左側的黃色條將顯示一個JavaFX標簽,該標簽基於由WebView調用的JavaScript函數觸發的確認對話框的結果,該函數覆蓋屏幕的其余部分。
確認對話框在WebView頂部的JavaFX中呈現,在顯示對話框時阻止與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; }
}
莫代爾,dialog.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對話框,您將實現您想要的效果。 您可以使用標准Dialog(其功能類似於Internet Explorer的JavaScript警報對話框)或輕量級對話框(其功能類似於Firefox的JavaScript警報對話框) - 有關詳細信息,請參閱ControlsFX功能頁面 。
ControlsFX是基於Java 8的,但是對於JavaFX 2.2,StackOverflow上有很多關於在JavaFX中顯示對話框的主題(例如: 如何在JavaFX 2.0中創建和顯示常見對話框(錯誤,警告,確認)? )。 上面的示例代碼是JavaFX 2.2中對話框用法的示例
對您提問中提出的其他觀點的評論
如果JavaFX的webview本身可以運行javascript,除了它與java代碼的通信
是的,WebView可以處理JavaScript。
例如,我可以在窗口加載時在webview中運行javascript警告語句,並在webview中實際獲得警報,就像在普通瀏覽器中一樣。
是的,如果您為WebView設置了警報處理程序,使其功能類似於“普通瀏覽器”,則會彈出一個關於接收JavaScript警報命令的對話框。 請注意,“普通瀏覽器”不會基於JavaScript警報功能修改網頁文檔對象模型,而是彈出本機對話框 - 該對話框實際上不是網頁的一部分。
我實際上希望javascript事件發生在webview窗口本身,就像在普通瀏覽器中一樣。
“普通”瀏覽器根據其UI模型處理不同的警報。 例如,在Firefox中,警報對話框將顯示在當前瀏覽器選項卡窗口中,在Internet Explorer中,警報對話框將顯示在Internet Explorer窗口上方。 JavaFX警報處理程序非常靈活,您可以隨意處理警報。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.