Question

在客户端的GWT应用程序中，我正在生成一个包含HTML内容的字符串，并将其传递给在新选项卡中打开它的函数。我编写了一个CSS文件来设置HTML内容的样式，并提供了指向它的链接。但是我的HTML文件没有样式。

public void writeHtml(){
    StringBuffer html = new StringBuffer();
    html.append("<!DOCTYPE html>");
    html.append("<html lang=\"en\">");
    html.append("<head>");
    html.append("<title>Hello World</title>");
    html.append("<meta charset=\"utf-8\">\n" +
                "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n");

    html.append("<link href=\"StyleSheet.css\" rel=\"stylesheet\" type=\"text/css\">");

    html.append("</head>");
    html.append("<body>\n" +
                "\n" +
                "<h1>This is a heading</h1>\n" +
                "<p>This is a paragraph.</p>\n" +
                "\n" +
                "</body>\n" +
                "</html>");
    openPrintWindow(html.toString());
}

public native void openPrintWindow(String contents) /*-{
    var printWindow = window.open("", "PrintWin", false);
    printWindow.document.open("text/html","replace");
    if (printWindow && printWindow.top) {
        printWindow.document.write(contents);

    } else {
        alert("The print feature works by opening a popup window, but our popup window was blocked by your browser.  If you can disable the blocker temporarily, you'll be able to print here.  Sorry!");
    }
}-*/;

CSS文件-StyleSheet.css

h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
p  {
  color: red;
  font-family: courier;
  font-size: 160%;
}

那么，问题是什么，我在哪里出问题？

Answer 1

您编写了html..append（“”）;而不是html.append（）;

它能回答您的问题吗？

Answer 2

在您的评论之一中，您写道：

这两个文件都位于同一文件夹中。因此，我认为路径是正确的。

那不是事实。您需要将 source 文件夹与 public 文件夹区分开。如果您可以链接 source 文件夹中的文件并使它们可供下载，那将是非常不安全的。

您应该阅读有关Standard Directory and Package Layout的信息。在那里，您会找到：

src文件夹-包含生产Java源代码

war文件夹-您的网络应用；包含静态资源以及编译后的输出

这意味着，您需要将StyleSheet.css文件放入war文件夹中。

将StyleSheet.css文件复制到war文件夹后（并修复了您所发布代码中的某些错别字-请参见我的编辑），我得到了这一证明，以证明其有效：

作为进一步的阅读，我建议使用Modules: Units of configuration文档的Public Path部分。

说完所有这些话：如果仅在war文件夹中创建一个静态html文件，然后打开一个新窗口，并以指向该文件的链接作为参数，则将容易得多。

如何将CSS文件链接到HTML

2 个答案: