此页面由 Cloud Translation API 翻译。

HTML 服务：模板化 HTML

您可以将 Apps 脚本代码和 HTML 混合在一起，以尽可能减少努力。如果您使用将代码和 HTML 混合的模板语言（例如 PHP、ASP 或 JSP，那么语法应该很熟悉。

Scriptlet

Apps 脚本模板可以包含三个特殊标记，称为 scriptlet。内部因此您可以编写任何可在普通 Apps 脚本中使用的代码文件：scriptlet 可以调用其他代码文件中定义的函数、全局变量，也可以使用任何 Apps Script API。您甚至可以定义函数和变量，但请注意，不能由代码文件或其他模板中定义的函数调用。

如果将下面的示例粘贴到脚本编辑器中， <?= ... ?> 标记（打印脚本）将出现在斜体。在网页提供之前，在服务器上运行该斜体代码。由于 scriptlet 代码是在加载网页之前执行的，因此它每个网页只能运行一次；与客户端 JavaScript 或 Apps 脚本不同，函数 google.script.run，scriptlet 不能在网页加载后再次执行

Code.gs

function doGet() {
  return HtmlService
      .createTemplateFromFile('Index')
      .evaluate();
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Hello, World! The time is <?= new Date() ?>.
  </body>
</html>

请注意，模板化 HTML 的 doGet() 函数与示例不同了解创建和提供基本 HTML 的介绍。函数生成了一个 HTML 中的 HtmlTemplate 对象文件，然后调用其 evaluate() 方法执行 scriptlet 并将模板转换为 HtmlOutput 对象，供脚本可向该用户投放

标准 Scriptlet

使用 <? ... ?> 语法的标准脚本执行代码无需以显式方式将内容输出到网页。不过，正如此示例所示， scriptlet 内代码的结果仍可能会影响 HTML 内容在 scriptlet 外部添加以下代码：

Code.gs

function doGet() {
  return HtmlService
      .createTemplateFromFile('Index')
      .evaluate();
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <? if (true) { ?>
      <p>This will always be served!</p>
    <? } else  { ?>
      <p>This will never be served.</p>
    <? } ?>
  </body>
</html>

打印 Scriptlet

输出脚本（使用 <?= ... ?> 语法）会输出通过内容相关转义将其代码嵌入到网页中

内容相关转义是指 Apps 脚本跟踪输出内容的上下文。在网页上 - HTML 属性内、客户端 script 标记内，或者，并自动添加转义字符跨站点脚本攻击 (XSS) 攻击。

在此示例中，第一个输出 scriptlet 直接输出一个字符串；是然后是设置数组和循环的标准脚本，最后是另一个输出脚本脚本来输出数组的内容。

Code.gs

function doGet() {
  return HtmlService
      .createTemplateFromFile('Index')
      .evaluate();
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <?= 'My favorite Google products:' ?>
    <? var data = ['Gmail', 'Docs', 'Android'];
      for (var i = 0; i < data.length; i++) { ?>
        <b><?= data[i] ?></b>
    <? } ?>
  </body>
</html>

请注意，输出 scriptlet 仅输出其第一个语句的值；其余所有语句的行为方式和其包含在脚本。例如，scriptlet <?= 'Hello, world!'; 'abc' ?> 只有输出“Hello, world!”

强制打印 Scriptlet

强制打印的 scriptlet（使用语法<?!= ... ?>）与输出类似但脚本可以避免上下文转义。

如果您的脚本允许不受信任的用户输入，请务必进行内容相关转义。修改者相比之下，如果您的脚本输出是有意为之，包含要完全按照指定方式插入的 HTML 或脚本。

一般而言，请使用输出脚本，而不是强制打印 Scriptlet 除非您知道自己需要按原样打印 HTML 或 JavaScript。

Scriptlet 中的 Apps 脚本代码

Scriptlet 不限于运行常规 JavaScript；您也可以使用任意通过以下三种方法为模板提供对 Apps 脚本的访问权限数据。

不过请注意，由于模板代码是在投放网页之前执行的，因此这些技术只能将初始内容馈送到网页中。如何访问使用 google.script.run API。

通过模板调用 Apps 脚本函数

Scriptlet 可以调用 Apps 脚本代码文件或库中定义的任何函数。此示例展示了一种将数据从电子表格提取到模板的方法，根据数据构建 HTML 表格。

Code.gs

function doGet() {
  return HtmlService
      .createTemplateFromFile('Index')
      .evaluate();
}

function getData() {
  return SpreadsheetApp
      .openById('1234567890abcdefghijklmnopqrstuvwxyz')
      .getActiveSheet()
      .getDataRange()
      .getValues();
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <? var data = getData(); ?>
    <table>
      <? for (var i = 0; i < data.length; i++) { ?>
        <tr>
          <? for (var j = 0; j < data[i].length; j++) { ?>
            <td><?= data[i][j] ?></td>
          <? } ?>
        </tr>
      <? } ?>
    </table>
  </body>
</html>

直接调用 Apps Script API

您也可以直接在脚本中使用 Apps 脚本代码。本示例通过在而不是通过单独的函数来实现

Code.gs

function doGet() {
  return HtmlService
      .createTemplateFromFile('Index')
      .evaluate();
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <? var data = SpreadsheetApp
        .openById('1234567890abcdefghijklmnopqrstuvwxyz')
        .getActiveSheet()
        .getDataRange()
        .getValues(); ?>
    <table>
      <? for (var i = 0; i < data.length; i++) { ?>
        <tr>
          <? for (var j = 0; j < data[i].length; j++) { ?>
            <td><?= data[i][j] ?></td>
          <? } ?>
        </tr>
      <? } ?>
    </table>
  </body>
</html>

将变量推送到模板

最后，您可以将变量作为属性分配，从而将变量推送到模板中 HtmlTemplate 对象的 ID。一次但这个示例实现的结果与前面的示例相同。

Code.gs

function doGet() {
  var t = HtmlService.createTemplateFromFile('Index');
  t.data = SpreadsheetApp
      .openById('1234567890abcdefghijklmnopqrstuvwxyz')
      .getActiveSheet()
      .getDataRange()
      .getValues();
  return t.evaluate();
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <table>
      <? for (var i = 0; i < data.length; i++) { ?>
        <tr>
          <? for (var j = 0; j < data[i].length; j++) { ?>
            <td><?= data[i][j] ?></td>
          <? } ?>
        </tr>
      <? } ?>
    </table>
  </body>
</html>

调试模板

调试模板可能比较困难，因为您编写的代码不会执行 directly;而是会将模板转换为代码，然后执行生成的代码

如果模板对脚本的解读方式不够明显，可以添加两个调试方法 HtmlTemplate 类可以帮助您从而更好地了解发生的情况

getCode()

getCode() 会返回一个包含服务器通过模板创建的代码的字符串。如果您记录然后将其粘贴到脚本编辑器中，就可以运行它并像往常一样进行调试 Apps 脚本代码。

下面是一个简单模板，再次显示 Google 产品列表，然后是 getCode() 的结果：

Code.gs

function myFunction() {
  Logger.log(HtmlService
      .createTemplateFromFile('Index')
      .getCode());
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <?= 'My favorite Google products:' ?>
    <? var data = ['Gmail', 'Docs', 'Android'];
      for (var i = 0; i < data.length; i++) { ?>
        <b><?= data[i] ?></b>
    <? } ?>
  </body>
</html>

日志（已评估）

(function() { var output = HtmlService.initTemplate(); output._ =  '<!DOCTYPE html>\n';
  output._ =  '<html>\n' +
    '  <head>\n' +
    '    <base target=\"_top\">\n' +
    '  </head>\n' +
    '  <body>\n' +
    '    '; output._$ =  'My favorite Google products:' ;
  output._ =  '    ';  var data = ['Gmail', 'Docs', 'Android'];
        for (var i = 0; i < data.length; i++) { ;
  output._ =  '        <b>'; output._$ =  data[i] ; output._ =  '</b>\n';
  output._ =  '    ';  } ;
  output._ =  '  </body>\n';
  output._ =  '</html>';
  /* End of user code */
  return output.$out.append('');
})();

getCodeWithComments()

getCodeWithComments() 与 getCode() 类似，但会将已评估的代码作为注释返回：与原始模板并排显示。

浏览已评估的代码

在两个已评估的代码示例中，您首先会注意到的是通过 HtmlService.initTemplate() 方法创建的 output 对象。此方法因为只有模板本身才需要使用它，所以没有文档记录。output是特殊的 HtmlOutput 对象，其中包含两个 _ 和 _$ 等命名异常的属性，它们是调用 append()和 appendUntrusted()。

output 还有一个特殊属性 $out，它指的是常规的 HtmlOutput 对象。模板会在代码末尾返回常规对象。

现在，您已经了解了此语法，其余代码应该非常简单。附加了 scriptlet 之外的 HTML 内容（例如 b 标记）使用 output._ =（不进行上下文转义），和 scriptlet 会被附加为 JavaScript（无论是否有上下文转义，具体取决于脚本的类型）。

请注意，评估的代码会保留模板中的行号。如果您在运行已评估的代码时出错，该行将与等同的内容。

注释的层次结构

由于经过评估的代码会保留行号，因此可以对以注释掉其他 scriptlet 甚至 HTML 代码。这些以下示例展示了评论的一些令人惊讶的效果：

<? var x; // a comment ?> This sentence won't print because a comment begins inside a scriptlet on the same line.

<? var y; // ?> <?= "This sentence won't print because a comment begins inside a scriptlet on the same line.";
output.append("This sentence will print because it's on the next line, even though it's in the same scriptlet.”) ?>

<? doSomething(); /* ?>
This entire block is commented out,
even if you add a */ in the HTML
or in a <script> */ </script> tag,
<? until you end the comment inside a scriptlet. */ ?>