如何将带有外部 JavaScript 文件的 jQuery 依赖 HTML 加载到 JavaFx WebView答案

【问题标题】：How to load jQuery dependent HTML with external JavaScript files to JavaFx WebView如何将带有外部 JavaScript 文件的 jQuery 依赖 HTML 加载到 JavaFx WebView
【发布时间】：2014-04-09 05:25:42
【问题描述】：

如何在$(document).ready(function() 之后将 JavaScript 加载到 JavaFx Webview 。在 webview 加载之后并且不等待诸如onButtonClick 动作之类的事件，例如？

这个问题的答案将回答我的主要问题，如何将 jQuery 添加到 webview 中？。

我一直在尝试完成以下工作，但未能成功将其他类似的在线解决方案集成到我的问题上。

我想添加到 webview 的 HTML 文件如下：

<!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,
            events: [
                {
                    title: 'All Day Event',
                    start: new Date(y, m, 1)
                },
                {
                    title: 'Long Event',
                    start: new Date(y, m, d-5),
                    end: new Date(y, m, d-2)
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: new Date(y, m, d-3, 16, 0),
                    allDay: false
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: new Date(y, m, d+4, 16, 0),
                    allDay: false
                },
                {
                    title: 'Meeting',
                    start: new Date(y, m, d, 10, 30),
                    allDay: false
                },
                {
                    title: 'Lunch',
                    start: new Date(y, m, d, 12, 0),
                    end: new Date(y, m, d, 14, 0),
                    allDay: false
                },
                {
                    title: 'Birthday Party',
                    start: new Date(y, m, d+1, 19, 0),
                    end: new Date(y, m, d+1, 22, 30),
                    allDay: false
                },
                {
                    title: 'Click for Google',
                    start: new Date(y, m, 28),
                    end: new Date(y, m, 29),
                    url: 'http://google.com/'
                }
            ]
        });

    });

</script>
<style>

    body {
        margin-top: 40px;
        text-align: center;
        font-size: 14px;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        }

    #calendar {
        width: 900px;
        margin: 0 auto;
        }

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

这是我迄今为止一直在尝试做的事情：

public class WebViewSample extends Application {

    private Scene scene;

    @Override
    public void start(Stage stage) {
        // create the scene
        stage.setTitle("Web View");
        scene = new Scene(new Browser(), 750, 500, Color.web("#666970"));
        stage.setScene(scene);
        scene.getStylesheets().add("WebViewSample/fullcalendar-1.6.4/fullcalendar/fullcalendar.css");
        stage.show();
    }

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

    class Browser extends Region {

        final WebView browser = new WebView();
        final WebEngine webEngine = browser.getEngine();

        public Browser() {
            //apply the styles
            getStyleClass().add("browser");
            // load the web page
            webEngine.load("WebViewSample/fullcalendar-1.6.4/demos/default.html");
            //add the web view to the scene
            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();
            layoutInArea(browser, 0, 0, w, h, 0, HPos.CENTER, VPos.CENTER);
        }

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

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

我从中得到的只是一个空白的白色窗口，而不是像 jQuery 日历插件 FullCalender 这样在窗口上绘制的东西。

提前谢谢你。

【问题讨论】：

标签： java javascript jquery webview javafx

【解决方案1】：

试试这个：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta name="layout" content="main">
   <meta name="viewport" content="width=device-width"/> 
    <title>Calendar</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <link rel='stylesheet' href="fullcalendar.css" />
<script src="jquery.min.js"></script>
<script src="moment.min.js"></script>
<script src="fullcalendar.min.js"></script>

<script>
    $(document).ready(function() {

    // page is now ready, initialize the calendar...

    $('#calendar').fullCalendar({

        //events:"%EVENT_URL%",
        allDaySlot: false,
        header:
        {
             left: 'today prev next',
             center: 'title',
             right: 'month,agendaWeek,agendaDay'
            },
        defaultView:'agendaDay',
        firstHour:'9',
        minTime:'8:00',
        weekends: true    
   });   

});
</script>

【讨论】：