HTML 服務可讓您提供可與伺服器端 Apps Script 函式互動的網頁。這項功能特別適合在 Google 文件、試算表和表單中建構網頁應用程式或新增自訂使用者介面。甚至可以用來產生電子郵件主旨。
建立 HTML 檔案
如要將 HTML 檔案新增至 Apps Script 專案,請按照下列步驟操作:
- 開啟 Apps Script 編輯器。
- 依序按一下左側的「新增檔案」圖示 >「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()
函式,或是重新載入文件、試算表或表單編輯器的視窗 (會關閉指令碼編輯器)。完成後,每次開啟檔案時,自訂選單應會在幾秒內顯示。選擇「對話」>「開啟」,即可查看介面。