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