本頁面由 Cloud Translation API 翻譯而成。

HTML Service：最佳做法

透過 HTML 服務建立使用者介面，遵循與其他網路開發類型相同的模式和做法。不過，有些方面僅適用於 Apps Script 環境或值得特別注意。以下我們會說明開發自己的 HTML 服務 UI 時，應謹記的幾個最佳做法。

為協助示範這些最佳做法，我們使用 Simple Tasks 服務建立了一個範例應用程式。完整的原始碼和設定操作說明請參閱 GitHub 存放區。

HTML、CSS 和 JavaScript

將所有 HTML、CSS 和 JavaScript 程式碼都儲存在單一檔案中，會讓人難以讀取及開發專案。雖然 Apps Script 要求用戶端程式碼必須放在 .html 檔案中，但您仍然可以將 CSS 和用戶端 JavaScript 分割成不同的檔案，然後利用自訂函式將這些程式碼納入主要 HTML 頁面。

以下範例會在 Code.gs 檔案中定義自訂伺服器端 include() 函式，以便將 Stylesheet.html 和 JavaScript.html 檔案內容匯入 Page.html 檔案。使用列印指令碼 let呼叫時，這個函式會將指定檔案內容匯入目前檔案。請注意，內含的檔案含有 <style> 和 <script> 標記，因為這些標記是 HTML 程式碼片段，不是純粹的 .css 或 .js 檔案。

Code.gs

function doGet(request) {
  return HtmlService.createTemplateFromFile('Page')
      .evaluate();
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

Page.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include('Stylesheet'); ?>
  </head>
  <body>
    <h1>Welcome</h1>
    <p>Please enjoy this helpful script.</p>
    <?!= include('JavaScript'); ?>
  </body>
</html>

Stylesheet.html

<style>
p {
  color: green;
}
</style>

JavaScript.html

<script>
window.addEventListener('load', function() {
  console.log('Page is loaded');
});
</script>

以非同步方式載入資料 (而非在範本中載入)

範本 HTML 可用來快速建構簡易介面，但請務必限制使用者介面，以確保 UI 能夠回應。系統會在頁面載入時執行範本中的程式碼一次，且在處理完畢之前，系統不會將任何內容傳送至用戶端。在 Scriptlet 程式碼中執行長時間執行的工作可能會導致 UI 顯示速度變慢。

使用 Scriptlet 標記進行一次性的快速工作，例如加入其他內容或設定靜態值。所有其他資料都應使用 google.script.run 呼叫載入。以此非同步方式進行程式設計較為困難，但可以讓 UI 更快載入，並讓您有機會向使用者顯示旋轉圖示或其他載入訊息。

錯誤 - 載入範本

<p>List of things:</p>
<? var things = getLotsOfThings(); ?>
<ul>
  <? for (var i = 0; i < things.length; i++) { ?>
    <li><?= things[i] ?></li>
  <? } ?>
</ul>

建議做法 - 以非同步方式載入

<p>List of things:</p>
<ul id="things">
    <li>Loading...</li>
</ul>

<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
// The code in this function runs when the page is loaded.
$(function() {
  google.script.run.withSuccessHandler(showThings)
      .getLotsOfThings();
});

function showThings(things) {
  var list = $('#things');
  list.empty();
  for (var i = 0; i < things.length; i++) {
    list.append('<li>' + things[i] + '</li>');
  }
}
</script>

在簡易工作範例應用程式中，HTML 服務頁面 Page.html 會以這種方式載入資料，並且只使用範本功能將其他原始碼納入網頁。

使用 HTTPS 載入資源

如果網頁使用新版 IFRAME 沙箱模式 (包括未使用 HTTPS 提供的 JavaScript 或 CSS 檔案)，會導致錯誤發生如下的錯誤。

混合內容：位於「https://...」的網頁是透過 HTTPS 載入，但要求使用不安全的指令碼「http://...」。這項要求已封鎖，必須透過 HTTPS 提供內容。

最熱門的程式庫同時支援 HTTP 和 HTTPS，因此切換通常只需要在網址內插入 s 即可。

使用 HTML5 文件類型宣告

如果您使用新版 IFRAME 沙箱模式來提供網頁，請務必在 HTML 檔案頂端加入以下程式碼片段。

<!DOCTYPE html>

這種文件類型解密會告訴瀏覽器您為新型瀏覽器設計頁面，但該模式不應使用相容模式轉譯頁面。即使您不打算使用新型的 HTML5 元素或 JavaScript API，這也有助於確保網頁正確顯示。

最後載入 JavaScript

許多網站開發人員會建議在網頁底部載入 JavaScript 程式碼，以便加快回應速度，而這對 HTML 服務來說更是如此。將 <script> 標記移至網頁結尾，可讓 HTML 內容在處理 JavaScript 之前轉譯，以便向使用者顯示旋轉圖示或其他訊息。

利用 jQuery

jQuery 是熱門的 JavaScript 程式庫，可簡化網站開發中的許多常見工作。