您可以混合使用 Apps 脚本代码和 HTML 轻松制作动态网页。如果您使用过混合了代码和 HTML 的模板语言(如 PHP、ASP 或 JSP),您应该熟悉语法。
Scriptlet
Apps 脚本模板可以包含三个特殊标记,称为 scriptlet。在 scriptlet 内,您可以编写可在普通 Apps 脚本文件中使用的任何代码:scriptlet 可以调用其他代码文件中定义的函数、引用全局变量或使用任何 Apps Script API。您甚至可以在脚本中定义函数和变量,但请注意,代码文件或其他模板中定义的函数无法调用这些函数和变量。
如果将下面的示例粘贴到脚本编辑器中,<?= ... ?>
标记(打印脚本小文件)的内容将以斜体显示。该斜体代码在页面提供给用户之前在服务器上运行。由于 scriptlet 代码在网页投放之前执行,因此每个网页只能运行一次;与您通过google.script.run
调用的客户端 JavaScript 或 Apps Script 函数不同,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()
方法来执行脚本,并将模板转换为 HtmlOutput
对象,脚本可将其传送给用户。
标准 Scriptlet
使用 <? ... ?>
语法的标准 scriptlet 能够执行代码,而无需将内容显式输出到网页。不过,如本例所示,scriptlet 内代码的结果仍可能会影响该 consolelet 之外的 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
输出脚本使用 <?= ... ?>
语法将其代码结果输出到页面中。
内容相关转义是指 Apps 脚本会跟踪页面上输出的上下文(HTML 属性内、客户端 script
标记内或任何其他地方),并自动添加转义字符,以防范跨站脚本攻击 (XSS) 攻击。
在此示例中,第一个输出脚本脚本直接输出一个字符串;后跟一个标准脚本脚本(用于设置数组和循环),以及另一个输出脚本脚本脚本(用于输出数组内容)。
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 类似,不同之处在于它们可以避免上下文转义。
如果您的脚本允许不受信任的用户输入,请务必进行内容相关转义。相比之下,如果您的脚本输出有意包含要完全按照指定方式插入的 HTML 或 HTML 或脚本,则需要强制打印。
一般来说,除非您知道自己需要不加更改 HTML 或 JavaScript 的输出,否则请使用输出脚本,而不是强制打印 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>
调试模板
调试模板可能比较困难,因为您编写的代码不是直接执行的代码,而是服务器将您的模板转换为代码,然后执行生成的代码。
如果模板如何解读您的脚本,则使用 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. */ ?>