JavaFX WebView 添加样式表，解析计算错误

Question

我正在尝试使用以下代码将 CSS 文件从 URL 加载到 WebView 中:
this.webView.getStylesheets().add("http://page.com/style.css");
但 JavaFX 抛出错误:
解析 http://page.com/style.css 的 CSS 错误:[230,17] 处出现意外标记“-”
我检查了文件，它是 calc 'method':
宽度:calc(71% - 142px);
是否可以加载这样的页面？以及如何？

Answer 1

您将样式表应用到 WebView 本身，而不是它显示的文档。这将尝试为 WebView 本身设置样式:它不会将 CSS 应用于 HTML 内容。对于 JavaFX 场景图节点，不支持 calc 函数:JavaFX CSS reference显示哪些 CSS 对 JavaFX 场景图节点有效。

我怀疑您正在尝试使用 WebView 显示的 HTML 文档的样式表。为此，您应该以通常的方式在 HTML 文档中引用样式表。

如果您想动态加载样式表，您可以在加载后尝试操作 HTML 文档。大致如下:

private void addStylesheet(Document doc, String cssLocation) {
    Element docElement = doc.getDocumentElement();
    NodeList heads = docElement.getElementsByTagName("head");
    Element head ;
    if (heads.getLength() == 0) {
        head = doc.createElement("head");
        docElement.appendChild(head);
    } else {
        head = (Element) heads.item(0);
    }
    Element link = doc.createElement("link");
    link.setAttribute("rel", "stylesheet");
    link.setAttribute("type", "text/css");
    link.setAttribute("href", cssLocation);
    head.appendChild(link);     
}

然后

    WebEngine engine = webView.getEngine();

    engine.getLoadWorker().stateProperty().addListener((obs, oldState, newState) -> {
        if (newState == Worker.State.SUCCEEDED) {
            addStylesheet(engine.getDocument(), "http://page.com/style.css");
        }
    });

    engine.load(/* your html ... */);