javascript - 在 WebView javafx 中用 Canvas 打开 html 文件

标签 javascript canvas javafx

我正在尝试在 webView 中打开 score-viewer.html。代码如下。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>    
 <link rel="stylesheet" href="./css/smoothness/jquery-ui-1.8.20.custom.css"> 
<script type="text/javascript" src="./js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery/jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript" src="./js/zip.js/arraybuffer.js"></script>    
<script type="text/javascript" src="./js/zip.js/dataview.js"></script>
<script type="text/javascript" src="./js/zip.js/deflate.js"></script>
<script type="text/javascript" src="./js/zip.js/inflate.js"></script>
<script type="text/javascript" src="./js/zip.js/zip.js"></script>
<script type="text/javascript">zip.workerScriptsPath='../js/zip.js/';</script>
<script type="text/javascript" src="./scorediv-pv0.0.3.js"></script>
<div class="score-div" style="position: relative; width: 700px; height: 700px;" musicxml_ref="./musicxml/01a-Pitches-Pitches.xml"></div>
</body>
</html>

在 JavaFX 中加载 .html 文件。

WebView webview = null;
WebEngine webEngine = null;
try {

        webview = new WebView();
        webview.setVisible(true);
        webEngine = webview.getEngine();
        webEngine.setJavaScriptEnabled(true);
       final URL urlHello = getClass().getResource("/score-viewer/score-viewer.html");
        webEngine.load(urlHello.toExternalForm());

    } catch (Exception ex) {

        System.err.print("error " + ex.getMessage());
        ex.printStackTrace();
    }

此页面应显示用于加载由 javascript 生成的 canvas 标签中的笔记和乐谱的工具栏。 如果我在 Mozilla Firefox 中打开该文件,它会工作,它会从 .xml 文件中呈现乐谱。但在 WebView 中,我只得到工具栏和黑色背景,而不是乐谱。

我看过webview应该支持canvas标签,请问是哪里出了问题?

最佳答案

我试过了,工具栏也变成了黑色背景。当我按下工具栏上的刷新按钮时,工作表被渲染了。所以它有效,但有些东西阻止了工作表在启动时加载。

这是一个 hack,但如果你加载 score-div 两次,第二次将正确显示:

<div class="score-div" musicxml_ref="./musicxml/01a-Pitches-Pitches.xml"></div>
<div class="score-div" style="position: relative; width: 700px; height: 500px;" musicxml_ref="./musicxml/01a-Pitches-Pitches.xml"></div>

关于javascript - 在 WebView javafx 中用 Canvas 打开 html 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27227431/

相关文章:

javascript - jquery div元素的索引

javascript - 以编程方式访问 JavaScript 中的字体规范

javascript - 在 JavaScript Canvas 上创建文本轮廓

button - ActionEvent 获取按钮 JavaFX 的来源

java - 如何判断某个键是否包含在 Hashmap 中的非命名 Hashmap 中? Java、JavaFX

javascript - 我们如何自定义内置的 Angular "currency"过滤器?

javascript - 什么是 ESNext?

javascript - 捕获 html Canvas 进行处理

javascript - 如何删除 Canvas 中的特定区域

java - 如何向我的 JavaFX 应用程序添加重置/重新启动按钮以重置我的场景?