未导入 .html 文档的样式表

Question

我有这个用 google 应用程序脚本编写的 HTML（称为 form.html）创建的表单，我还有一个样式表（CSS）来配合它。当我将 CSS 放在与表单相同的 HTML 文件中时，一切都运行良好。但是，如果我想将样式表放在单独的 HTML 文件（称为 Stylesheet.html）中，然后使用脚本将其包含在 form.html 中

<?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>

甚至创建一个“包含”函数：

function include(filename) {
   return HtmlService.createHtmlOutputFromFile(filename)
  .setSandboxMode(HtmlService.SandboxMode.IFRAME)
  .getContent();
  }

然后在 form.html

<?!= include(Stylesheet) ?>

..它似乎不起作用。更糟糕的是，scriplet 出现在表单上。也许我忽略了一些基本的东西，但我无法理解这一点。有任何想法吗 ？

这是到目前为止的代码......

<?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>

function include(filename) {
   return HtmlService.createHtmlOutputFromFile(filename)
  .setSandboxMode(HtmlService.SandboxMode.IFRAME)
  .getContent();
  }

<?!= include(Stylesheet) ?>

用CSS结果IN的form.html

这是单独的 .html 文件中的 CSS 并包含在 form.html 中

<?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>

Answer 1

你这样做是对的：

您的 css 文件必须是 HTML 文件，因为它们是 .css 支持的唯一类型HtmlService。如果您查看启动脚本，您会发现它们有Stylesheet.html, 内容：

<!-- This CSS package applies Google styling; it should always be included. -->
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<style>
...
</style>

如果您的侧边栏或对话框看起来很像 google 的东西 - 相同的字体，相同的文本大小，那么您就知道 google css 正在工作。要将操作按钮设为蓝色，您需要向其添加适当的类，class="action".

为什么你的不工作？ ^{_{准备好面对面的时刻......}}

您正在使用 scriptlet，它是 Html 服务模板化 HTML 的一部分。他们需要解释，这不是由HtmlService.createHtmlOutputFromFile(). （这就是您从字面上看到 scriptlet 行的原因。）

相反，您需要读取包含 scriptlet 作为模板的文件，然后读取.evaluate()它。

function doGet() {
  return HtmlService.createTemplateFromFile('form')
      .evaluate()
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

要显示以 google 为主题的操作按钮，请包含 Apps Script CSS 并添加“action”类：

<input type="submit" id="verzenden" name="verzenden" class="action verzenden" value="Reservatie verzenden" >