JavaFX WebView 中嵌入的 HTML 无法正确呈现答案

【问题标题】：Embedded HTML in JavaFX WebView not rendering properlyJavaFX WebView 中嵌入的 HTML 无法正确呈现
【发布时间】：2015-04-14 21:31:06
【问题描述】：

我正在尝试将 CodeMirror js 编辑器嵌入 Web 视图中，大量借鉴了我从这篇文章中找到的代码。 http://github.com/jewelsea/conception

JavaFX code editor with content highlighter for Java Code

这里是html模板

<!doctype html>
<html>
    <head>  
        <link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
        <link rel="stylesheet" href="http://codemirror.net/theme/cobalt.css">  
        <script src="http://codemirror.net/lib/codemirror.js"></script>  
        <script src="http://codemirror.net/mode/sql/sql.js"></script>
    </head>
    <body>
        <form>
            <textarea id="code" name="code">--This is code inside the SQLTtool;&#10;INSERT INTO thing&#10;${code}</textarea>
        </form>
        <script>  var editor = CodeMirror.fromTextArea(document.getElementById("code"), { lineNumbers: true, matchBrackets: true, mode: "text/x-mssql", lineWrapping: true, theme: "cobalt"});
        </script>
    </body>
</html>

Firefox 渲染

网页视图渲染

诚然，我真的不知道我在这里做什么，因为我是 JavaFX 的新手并且没有使用 JavaScript 的经验。有什么想法吗？

环境

赢 7 64

java 版本“1.8.0_40” Java(TM) SE 运行时环境 (build 1.8.0_40-b25) Java HotSpot(TM) 64 位服务器 VM（内部版本 25.40-b25，混合模式）

代码

（我已将 Conception 项目中的代码剥离为更基本的设置）

@Override
public void start(Stage stage) throws Exception {   

    //set-up window 
    stage.setTitle("SQL Tool");
    stage.setMinWidth(800);
    stage.setMinHeight(600);
    stage.setScene(createScene());      
    stage.show();
}

private Scene createScene() throws IOException{

    final AnchorPane ap1 = new AnchorPane(createButton());
    final AnchorPane ap2 = new AnchorPane(createWebView());
    ap2.setBackground(new Background(new BackgroundFill(Color.AZURE,CornerRadii.EMPTY,Insets.EMPTY)));

    Scene scene = new Scene(layoutScene(
            ap1,
            ap2
    ));

    return scene;
}

private WebView createWebView() throws IOException{
    String template = Resources.toString(getResource("codemirror.html"), Charsets.UTF_8);
    WebView webview = new WebView();
    webview.getEngine().loadContent(template);
    AnchorPane.setLeftAnchor(webview, 10.0);
    AnchorPane.setRightAnchor(webview, 10.0);
    AnchorPane.setBottomAnchor(webview, 10.0);
    AnchorPane.setTopAnchor(webview, 10.0);
    return webview;
}

//set-up primary layout
private SplitPane layoutScene(Node... nodes) {
    final SplitPane layout = new SplitPane();
    layout.setOrientation(Orientation.VERTICAL);
    layout.setDividerPositions(.4f);
    layout.getItems().addAll(nodes);
    return layout;
}

private URL getResource(String name) {
    return getClass().getResource("resources/" + name);
}

【问题讨论】：

上传的图片可以附加链接;)
@ItachiUchiha 谢谢！
非常适合我。你能用你正在使用的代码以及你运行它的环境来更新问题吗？
对我来说仍然完美。 java可以上网吗？我猜它无法加载 js 和 css 库来呈现视图。
我在代理后面，显然有很多过滤正在进行。我能够拉下所有文件，然后使用替换语句使其暂时工作，直到我可以确定本地文件的相对链接

标签： webview javafx

【解决方案1】：

所以 - 除了代理服务器会导致反直觉的结果之外，在我将所有资源下载到本地后，我仍然在代码中发现了一个小问题。我将我的 HTML 标头更改为：

<head>  
    <link rel="stylesheet" href="./codemirror.css">
    <link rel="stylesheet" href="./cobalt.css">  
    <script src="./codemirror.js"></script>  
    <script src="./sql.js"></script>
</head>

页面仍然没有正确呈现。我不得不更改此代码：

String template = Resources.toString(getResource("codemirror.html"), Charsets.UTF_8);
WebView webview = new WebView();
webview.getEngine().loadContent(template);

对此：

URL url = getResource("codemirror.html");
webview.getEngine().load(url.toExternalForm());

似乎当您使用 .loadContent() 加载 html 时，相对链接没有上下文。我可以通过将 JS 的 sn-p 放入 html 并发现文档位置是“空白”来确定这一点。也许这应该很明显

【讨论】：