借助 HTML 服务,您可以提供可与服务器端 Apps 脚本函数交互的网页。它特别适合在 Google 文档、表格和表单中构建 Web 应用或添加自定义界面。您甚至可以用它来生成电子邮件的正文。
创建 HTML 文件
要将 HTML 文件添加到您的 Apps 脚本项目,请按以下步骤操作:
- 打开 Apps 脚本编辑器。
- 在左侧,依次点击“添加文件”图标 > HTML。
在 HTML 文件中,您可以编写大多数标准的 HTML、CSS 和客户端 JavaScript。该网页将以 HTML5 格式提供,但 HTML5 的部分高级功能不可用,如限制中所述。
您的文件还可以包含将网页发送给用户之前在服务器上处理的模板 scriptlet(与 PHP 类似),如模板化 HTML 部分中所述。
将 HTML 作为 Web 应用提供
如需使用 HTML 服务创建 Web 应用,您的代码必须包含一个 doGet()
函数,以告知脚本如何提供网页。该函数必须返回 HtmlOutput
对象,如以下示例所示。
Code.gs
function doGet() { return HtmlService.createHtmlOutputFromFile('Index'); }
Index.html
<!DOCTYPE html> <html> <head> <base target="_top"> </head> <body> Hello, World! </body> </html>
在该基本框架准备就绪后,您只需保存脚本的一个版本,然后将脚本部署为 Web 应用即可。
将脚本部署为 Web 应用后,您还可以将其嵌入 Google 网站中。
将 HTML 作为 Google 文档、表格、幻灯片或表单界面提供
如果您的脚本是受容器限制到文件的,则 HTML 服务可以在 Google 文档、表格、幻灯片或表单中显示对话框或边栏。(在 Google 表单中,只有打开表单进行修改的编辑者才能看到自定义界面,而打开表单进行回复的用户看不到自定义界面。)
与 Web 应用不同,为文档、电子表格或表单创建界面的脚本不需要特有 doGet()
函数,您也无需保存或部署脚本的某个版本。相反,打开界面的函数必须将 HTML 文件作为 HtmlOutput
对象传递给有效文档、表单或电子表格的 Ui
对象的 showModalDialog())
或 showSidebar()
方法。
为方便起见,这些示例包含一些额外的功能:onOpen()
函数会创建便于打开界面的自定义菜单,而 HTML 文件中的按钮会调用 google.script.host
API 的特殊 close()
方法来关闭界面。
Code.gs
// Use this code for Google Docs, Slides, Forms, or Sheets. function onOpen() { SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp. .createMenu('Dialog') .addItem('Open', 'openDialog') .addToUi(); } function openDialog() { var html = HtmlService.createHtmlOutputFromFile('Index'); SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp. .showModalDialog(html, 'Dialog title'); }
Index.html
<!DOCTYPE html> <html> <head> <base target="_top"> </head> <body> Hello, World! <input type="button" value="Close" onclick="google.script.host.close()" /> </body> </html>
请注意,第一次显示此界面时,您必须在脚本编辑器中手动运行 onOpen()
函数,或者重新加载文档、表格或表单编辑器的窗口(这将关闭脚本编辑器)。之后,每次您打开文件时,自定义菜单都应在几秒钟内显示。依次选择对话框 > 打开以查看界面。