此页面由 Cloud Translation API 翻译。

HTML 服务：创建和提供 HTML

通过 HTML 服务，您可以投放可与服务器端 Apps 脚本函数交互。它尤其有用构建 Web 应用或在 Google 文档、表格、和表单。您甚至可以用它来生成电子邮件的正文。

创建 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 对象 showModalDialog()) 或 showSidebar() 方法当前文档、表单或表单的 Ui 对象电子表格。

为方便起见，这些示例包括一些额外的功能：onOpen() 函数会创建一个自定义菜单， HTML 文件中的按钮会调用一个特殊的按钮， close() 方法（属于 google.script.host API，用于关闭界面。

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() 函数在脚本编辑器中手动执行或者重新加载文档、表格或表单编辑器的窗口（此操作会关闭脚本编辑器）。之后，自定义菜单应该会在几秒钟内显示每次打开文件时选择对话框 >打开即可查看界面。