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 協作平台中嵌入指令碼

以 Google 文件、試算表、簡報或表單使用者介面提供 HTML

如果您的指令碼已容器繫結至檔案,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() 函式,或是重新載入文件、試算表或表單編輯器的視窗 (這麼做會關閉指令碼編輯器)。之後,您每次開啟檔案,自訂選單應該會在幾秒內顯示。選擇「Dialog」>「Open」以查看介面。