HTML 服务:模板化 HTML

您可以将 Apps 脚本代码和 HTML 结合使用,从而轻松生成动态网页。如果您使用将代码和 HTML 混合的模板语言(如 PHP、ASP 或 JSP),则应该熟悉语法。

Scriptlet

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

如果您将以下示例粘贴到脚本编辑器中,<?= ... ?> 标记(输出脚本)的内容将以斜体显示。该斜体代码在网页提供给用户之前在服务器上运行。由于 scriptlet 代码在提供页面之前执行,因此每个页面只能运行一次;与你通过 google.script.run 调用的客户端 JavaScript 或 Apps 脚本函数不同,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 执行代码时不会将内容明确输出到网页中。不过,如下例所示,scriptlet 内代码的结果可能仍会影响该 scriptlet 外的 HTML 内容:

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

输出使用语法 <?= ... ?> 的 scriptlet 通过上下文转义将其代码结果输出到网页中。

上下文转义是指 Apps 脚本会跟踪网页上的输出上下文(在 HTML 属性内、客户端 script 标记内或任何位置),并自动添加转义字符,以防范跨站脚本攻击 (XSS)

在本例中,第一个输出 scriptlet 会直接输出一个字符串;其后是一个设置数组和循环的标准 scriptlet,其后是另一个输出 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 中一样。例如,scriptlet <?= 'Hello, world!'; 'abc' ?> 只会输出“Hello, world!”

强制输出 scriptlet

强制输出 scriptlet(使用语法 <?!= ... ?>)与输出 scriptlet 类似,只不过它们会避免上下文转义。

如果您的脚本允许不受信任的用户输入,上下文转义非常重要。相比之下,如果 scriptlet 的输出有意包含您想要完全按照指定的方式插入的 HTML 或脚本,则需要强制输出。

一般来说,除非您知道需要原封不动地输出 HTML 或 JavaScript,否则应使用输出 scriptlet 而不是强制输出 Scriptlet。

scriptlet 中的 Apps 脚本代码

Scriptlet 不限于运行常规 JavaScript;您还可以使用以下三种技术中的任意一种来授权模板访问 Apps 脚本数据。

但请注意,由于模板代码在网页呈现给用户之前执行,因此这些方法只能将初始内容馈送到网页。如需以交互方式从页面访问 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 对象的属性,从而将变量推送到模板中。再次强调,此示例实现了与之前示例相同的结果。

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>

调试模板

模板可能难以调试,因为您编写的代码不会直接执行;相反,服务器会将模板转换为代码,然后执行生成的代码。

如果模板如何解读您的 scriptlet,您可以不清楚,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 的类型)。

请注意,评估的代码会保留模板中的行号。如果您在运行经过评估的代码时收到错误,该行将与模板中的等效内容相对应。

评论的层次结构

由于已评估的代码会保留行号,因此 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. */ ?>