如何从Java调用JavaScript

时间:2015-01-11 11:56:03

标签: java javascript jquery webview javafx

我试图从Java调用JavaScript函数testCheckMate但是我收到错误:

Exception in thread "JavaFX Application Thread" netscape.javascript.JSException: SyntaxError: Unexpected EOF

WebView持有FullCalendar

如何从Java调用JQuery / Javascript?提前谢谢大家。

<!DOCTYPE html>
<html>
    <head>
        <link href='../fullcalendar/fullcalendar.css' rel='stylesheet' />
        <link href='../fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' />
        <script src='../lib/jquery.min.js'></script>
        <script src='../lib/jquery-ui.custom.min.js'></script>
        <script src='../fullcalendar/fullcalendar.min.js'></script>
        <script>

            $(document).ready(function() {

                var date = new Date();
                var d = date.getDate();
                var m = date.getMonth();
                var y = date.getFullYear();

                $('#calendar').fullCalendar({
                        editable: true,

                    testCheckMate: function() {
                        alert("Check-Mate");
                    },

                    events: [
                        {
                            title: 'All Day Event',
                            start: new Date(y, m, 1)
                        },
                        {
                            id: 999,
                            title: 'Repeating Event',
                            start: new Date(y, m, d + 4, 16, 0),
                            allDay: false
                        }
                    ]
                });

            });

        </script>
    </head>
    <body>
        <div id='calendar'></div>
    </body>
</html>

1 个答案:

答案 0 :(得分:1)

如果你想在html文件上添加一个函数,你可以使用另一个<script>标签,或者只使用那个,但是在$(document).ready() jQuery块之外:

<script>

    function testCheckMate() {
        alert("Check-Mate");
    };

    $(document).ready(function() {
        $('#calendar').fullCalendar({
           ...
        });
    }); 
</script>

或者,就像在此answer中一样,您需要预先声明该函数的名称:

<script>

    var testCheckMate;

    $(document).ready(function() {

        testCheckMate=function () {
            alert("Check-Mate");
        };

        $('#calendar').fullCalendar({
           ...
        });
    }); 
</script>

或者,如此answer,您可以在Java端创建函数,而无需修改html文件:

private WebView webView;
private WebEngine engine;

private void createCalendar() {
    webView = new WebView();
    engine = webView.getEngine();
    engine.load("file:D:/standAloneDev//src/fc/fullcalendarwebview/fullcalendar-1.6.4/demos/selectable.html");

    engine.getLoadWorker().stateProperty().addListener((ov,oldState, newState)->{
        if(newState==State.SUCCEEDED){

            // JS to Java
            JSObject script = (JSObject) engine.executeScript("window");
            script.setMember("myClick", new JavaApp());

            // Java to JS
            engine.executeScript("function testCheckMate() {\n" +
                        "            alert(\"Check-Mate\");\n" +
                        "        };");
        }
    });

    engine.setOnAlert(e->System.out.println("Alert: "+e.getData()));
}

并在您的应用上调用它:

 @Override
public void start(Stage primaryStage) {
    Button btn=new Button("Call function");
    btn.setOnAction(e->{
         engine.executeScript("testCheckMate();");
    });
    Scene scene = new Scene(new VBox(webView,btn), 600, 400);

    primaryStage.setScene(scene);
    primaryStage.show();
}

在任何情况下,请注意alert窗口不会显示在您的日历中,因为它被网络视图捕获。 setOnAlert()方法用于获取通知。