您可以将 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. */ ?>