在 Google Apps Script Web 应用程序中使用项目 Javascript 和 CSS 文件？

Question

如果我在 Google Apps 脚本中创建一个简单的 HTML 网络应用程序，如下所示：

function doGet() {
    return HtmlService.createHtmlOutputFromFile("index.html");
}

index.html 看起来像这样：

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<div>Test</div>

是否可以将 JS 和 CSS 文件作为项目的一部分添加并使用脚本和链接标签包含它们，或者它们是否必须内联/托管在其他地方？

Answer 1

这是我发现有用的解决方法：

1. 将此函数添加到您的服务器端 Javascript：

   function getContent(filename) {
       return HtmlService.createTemplateFromFile(filename).getRawContent();
   }
   

2. 向您的项目添加第二个“html”文件，该文件仅包含由<script> 或<style> 标记包围的JS 或CSS。

   <!-- myscript.js.html -->
   <script>
       alert("Script included!");
   </script>
   

3. 现在您可以将脚本包含在您的主 HTML 模板中，如下所示：

   <?!= getContent("myscript.js") ?>
   

这样，您可以将 JS 和 CSS 拆分为任意数量的文件，并让它们都可以从 Apps 脚本项目中访问。

Answer 2

Google 提供了类似的解决方案here。

基本上，他们建议您将此功能添加到您的 .gs 文件中：

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

并将其中一项或两项添加到您的 .html 文件中：

<?!= include('Stylesheet'); ?>
<?!= include('JavaScript'); ?>

引号中的名称当然是指包含带有<script> 或<style> 标签的JS 或CSS 代码的单独.html 文件。

Answer 3

目前，让您的 CSS 和 JS 脚本成为您的 Google Apps 脚本项目的一部分是不可行的。您必须将其托管在其他地方并将 URL 指向您的模板中。

Answer 4

您不能在项目中包含简单的 js 或 css 文件，因此您要做的是创建包含它的 html 文件，并且最好将 或

<script>
  alert ("Hello World!");
</script>

现在您将这一行放在您希望包含资产的 html 中

把它放在你想要包含资产的 html 中：

<?= HtmlService.createHtmlOutputFromFile('myscript.js').getContent() ?>

注意文件名中的“.html”被省略了。

如果您要包含许多资产，那么创建一个辅助函数可能是个好主意。您可以将以下函数放入您的代码（gs-file）中

function include(filename) {
    return HtmlService.createTemplateFromFile(filename).getRawContent();
}

那么上面的那一行可以改成：

<?!= include('myscript.js') ?>

最后，您还需要调用 HTMLTemplate 的 evaluate() 方法，否则 html 文件中 <?!= ?> 内的代码将不会被评估。 因此，例如，如果您正在提供这样的 html 文件：

var html=HtmlService.createTemplateFromFile('repeatDialog');
SpreadsheetApp.getUi().showModalDialog(html, 'foo');

您只需将其更改为：

var html=HtmlService.createTemplateFromFile('repeatDialog').evaluate();
SpreadsheetApp.getUi().showModalDialog(html, 'foo');

如果您之前使用的是 createHtmlOutputFromFile 而不是 createTemplateFromFile，那么您应该知道 evaluate() 返回 htmlOutput，所以如果您想知道将 .setWidth() 之类的内容放在哪里，那么它在 evaluate() 调用之后。

Answer 5

您可以直接在 scriptlet 标记内渲染文件。

<?!= HtmlService.createTemplateFromFile("example.js").getRawContent() ?>

在您的应用程序脚本项目中创建example.js.html 文件。在 scriptlet 标记中呈现时，不要提及扩展名“.html”