HTML 服務：建立及提供 HTML

HTML 服務可讓您提供可與伺服器端 Apps Script 函式互動的網頁。這項功能特別適合用來建構網頁應用程式，或在 Google 文件、試算表和表單中新增自訂使用者介面。甚至還能用來生成電子郵件內文。

建立 HTML 檔案

如要將 HTML 檔案新增至 Apps Script 專案，請按照下列步驟操作：

  1. 開啟 Apps Script 編輯器。
  2. 依序按一下左側的「新增檔案」圖示 >「HTML」。

在 HTML 檔案中，您可以編寫大部分標準的 HTML、CSS 和用戶端 JavaScript。網頁會以 HTML5 格式提供，但如「限制」一文所述，部分 HTML5 進階功能無法使用。

檔案也可以包含範本小指令，這些指令會在網頁傳送給使用者前於伺服器上處理 (類似 PHP)，詳情請參閱範本化 HTML 一節。

將 HTML 做為網頁應用程式放送

如要使用 HTML 服務建立網頁應用程式，程式碼必須包含 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>

基本架構完成後，您只要儲存指令碼版本，然後將指令碼部署為網路應用程式即可。

將指令碼部署為網頁應用程式後，您也可以將其嵌入 Google 協作平台。

將 HTML 做為 Google 文件、試算表、簡報或表單使用者介面提供服務

如果指令碼繫結至容器，HTML 服務就能在 Google 文件、試算表、簡報或表單中顯示對話方塊或側欄。(在 Google 表單中，自訂使用者介面只會顯示給開啟表單進行修改的編輯者，不會顯示給開啟表單回覆的使用者)。

與網頁應用程式不同，為文件、試算表或表單建立使用者介面的指令碼不需要特定的 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()在指令碼編輯器中手動執行 onOpen() 函式，或是重新載入文件、試算表或表單編輯器的視窗 (這會關閉指令碼編輯器)。之後每次開啟檔案時，自訂選單應該都會在幾秒內顯示。選擇「Dialog」>「Open」即可查看介面。