0

我想在使用 WebView 的 JavaFX 应用程序中使用 turn.js。为此，我创建了一个 WebView，其中内容设置如下：

@FXML
private WebView webView;

@Override
public void initialize(URL url, ResourceBundle rb) {
    final WebEngine engine = webView.getEngine();

    try {
        engine.setJavaScriptEnabled(true);
        engine.load(readHtml());

        engine.getLoadWorker().stateProperty().addListener(new ChangeListener<Worker.State>() {
            @Override
            public void changed(ObservableValue<? extends Worker.State> ov, Worker.State oldState, Worker.State newState) {
                if (State.SUCCEEDED == newState) {
                    startTurnJS(engine);
                }
            }

        });
    } catch (Exception ex) {
       // exception handling omitted
    }
}

private String readHtml() throws Exception {
    String result = getClass().getResource("turnjscontainer.html").toExternalForm();

    return result;
}

turnjscontainer.html 文件包含

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="http://www.turnjs.com/lib/turn.min.js"></script>

    <style type="text/css">
        body{
            background:#ccc;
        }
        #magazine{
            width:700px;
            height:450px;
        }
        #magazine .turn-page{
            background-color:#ddd;
            background-size:100% 100%;
        }
    </style>
</head>
<body>
    <div id="magazine">
        <div style="background-image:url(http://www.hsv.de/fileadmin/redaktion/Verein/hsv-logo-neu.jpg);"></div>
        <div style="background-image:url(http://t2.gstatic.com/images?q=tbn:ANd9GcQZlRvgmbKf7U8p0v47vVG2AjBS_IdY00kz74ZtNjWEl1EAs9eOWc15uQ);"></div>
    </div>


    <!-- <script type="text/javascript">

         $(window).ready(function() {
             $('#magazine').turn({
                 display: 'single',
                 acceleration: true,
                 gradients: !$.isTouch,
                 elevation: 50,
                 when: {
                     turned: function(e, page) {
                     }
                 }
             });
         });

         $(window).bind('keydown', function(e) {

             if (e.keyCode == 37)
                 $('#magazine').turn('previous');
             else if (e.keyCode == 39)
                 $('#magazine').turn('next');

         });

     </script>-->

</body>
</html>

注释了 javascript 部分，因为我在文档加载完成后通过调用 startTurnJS() 从控制器内部执行脚本：

private void startTurnJS(final WebEngine engine) {
    engine.executeScript("$(window).ready(function() {\n"
            + "                $('#magazine').turn({\n"
            + "                    display: 'single',\n"
            + "                    acceleration: true,\n"
            + "                    gradients: !$.isTouch,\n"
            + "                    elevation: 50,\n"
            + "                    when: {\n"
            + "                        turned: function(e, page) {\n"
            + "                        }\n"
            + "                    }\n"
            + "                });\n"
            + "            });");

    engine.executeScript("$(window).bind('keydown', function(e) {\n"
            + "\n"
            + "                if (e.keyCode == 37)\n"
            + "                    $('#magazine').turn('previous');\n"
            + "                else if (e.keyCode == 39)\n"
            + "                    $('#magazine').turn('next');\n"
            + "\n"
            + "            });");
}

WebView 中的结果是仅显示第一张图像，这至少表明 javascript 已执行。但是，没有可用的 turn.js 功能。

如果您取消注释 HTML 文件中的部分并在浏览器中加载页面，则 turn.js 可以工作。所以我想知道是否有可能让 turn.js 在 WebView 中工作？

4

0 回答 0