21

如果我在 Google Apps Script 中创建一个简单的 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 文件添加为项目的一部分并使用脚本和链接标签包含它们，或者它们是否必须内联/托管在其他地方？

4

5 回答 5

56

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

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

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

  2. <script>将第二个“html”文件添加到您的项目中，该文件仅包含由或<style>标记包围的 JS 或 CSS（视情况而定）。

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

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

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

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

于 2012-08-16T19:06:00.940 回答
7

谷歌在这里提供了类似的解决方案。

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

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

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

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

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

于 2015-02-27T22:39:34.427 回答
3

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

于 2012-07-08T00:01:10.993 回答
3

您不能在项目中包含简单的 js 或 css 文件，因此您要做的是创建包含它的 html 文件，并且最好将 <script></script> 或 <style> 放在这些文件中。

因此，您可能有一个文件，该文件名为myscript.js.html具有以下内容的文件：

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

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

将其放在要包含资产的 html 中：

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

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

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

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

那么上面的行可以改成：

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

最后，您还需要调用 HTMLTemplate 的评估（）方法，否则<?!= ?>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() 调用之后。

于 2019-01-25T10:24:55.137 回答
2

您可以直接在 scriptlet 标记内呈现文件。

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

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

于 2016-02-20T18:48:27.910 回答