JavaScript upcall 到 JavaFX FXML答案

【问题标题】：JavaScript upcall to JavaFX FXMLJavaScript upcall 到 JavaFX FXML
【发布时间】：2013-11-28 04:15:29
【问题描述】：

我在 SampleController.java 中使用 FXML WebView 来显示网页内容。现在的问题是如何从 html 文件中的 javascript 调用 java 函数，或者当点击 webview 网页时应该执行 javascript 并调用 Bridge() 中的代码来执行。有 JavaFX WebView 的示例，但找不到 FXML WebView 的任何示例。

    public class SampleController implements Initializable {

    @FXML Button write, read;
    @FXML ToolBar toolbar;
    @FXML WebView webview;
    WebEngine webEngine;
    JSObject window;

    @FXML
    private void setText(MouseEvent e){
        webEngine.executeScript("writeText()");
    }
    @FXML
    private void getText(MouseEvent e){
        String str = (String) webEngine.executeScript("readText()");
        System.out.println(str);
    }

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        webEngine = webview.getEngine();
        webEngine.load(getClass().getResource("test.html").toString());

     webEngine.getLoadWorker().stateProperty().addListener(new ChangeListener<Worker.State>() {
    @Override
    public void changed(ObservableValue<? extends State> ov, State t, State t1) {
        if (t1 == Worker.State.SUCCEEDED) {
            window = (JSObject) webEngine.executeScript("window");
            window.setMember("app", new Bridge());

        }
    }
});     
    }    
}

   // code for javaScript call

    public class Bridge {   
    public void exit() {
        Platform.exit();
    }

    public void display(String str){
        System.out.println(str);
    }
}

// Here is HTML with with javaScript
    <!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script>
            function writeText(){
                document.getElementById("div1").innerHTML = "New text!";
            }
            function readText(){
                var str = document.getElementById("div2").innerHTML;
                return str;
            }

        </script>
    </head>
    <body>
        <div id="div1">Urdu Books<img src="book.png" alt="book"></div>
        <div id="div2">Here is a text for you!</div>
        <div id="div3"></div>
        <p>Click <a href="#" onclick="java.exit()">here </a>to exit the application
        <p>Click <a href="#" onclick="java.display('This is value')"> Display </a> a value
    </body>
</html>

【问题讨论】：

标签： javafx-2 fxml

【解决方案1】：

window.setMember("app", new Bridge()); 执行此操作时，您基本上是告诉 JS 引擎将新的 Bridge 对象设置为窗口对象的 app 成员。

现在在您的 javascript 代码中，您可以只调用您的桥接方法，例如 window.app.exit() 或更简单的 app.exit()，因为 window 是全局对象。

【讨论】：