html - 如何在 GWT 中将 CSS 文件链接到 HTML

标签 html css gwt

在客户端的 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%;
}

那么,问题是什么,我哪里出错了?

最佳答案

在您的一条评论中,您写道:

Both the files are present in the same folder. So, I guess the path is correct.

那不是真的。您需要将您的 文件夹与公共(public) 文件夹区分开来。如果您可以链接 source 文件夹中的文件并使它们可供下载,那将是非常不安全的。

你应该阅读 Standard Directory and Package Layout .在那里你会发现:

src folder - contains production Java source

war folder - your web app; contains static resources as well as compiled output

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

StyleSheet.css 文件复制到 war 文件夹后(并修复您发布的代码中的一些拼写错误 - 请参阅我的编辑)我将其作为证明它有效:

enter image description here

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


综上所述:如果您只是在 war 文件夹中创建一个静态 html 文件,然后打开一个新窗口并以该文件的链接作为参数,就会容易得多。

关于html - 如何在 GWT 中将 CSS 文件链接到 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56556903/

相关文章:

javascript - 如何在 htmltextbox 中为 textchanged 事件调用 javascript?

javascript - 更换节点错误。要替换的节点不是该节点的子节点

javascript - 在 Javascript 中淡化和重新出现文本集

javascript - 使用 jquery 在鼠标悬停(按钮)时更改外部 div 的背景颜色

java - 从 Maven 运行 gwt - IntelliJ

java - 在旧的谷歌浏览器 gwt 表单设计中正确显示。但不支持 chrome 新版本 65.0.3325.162

javascript - html div 不允许离开页面

html - CSS 实现类似的固定 float div,它总是位于其他 div 之上——就像 stackoverflow 一样?

html - 缩放 CSS 边框半径

java - 是否仍支持 GWT Mosaic?