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

HTML Service：最佳做法

透過 HTML 服務建立使用者介面的模式，有許多相同的模式和其他網頁開發工作一樣簡單不過或在其他情況下適用的即可。以下將說明導入廣告活動時開發自己的 HTML-服務使用者介面

分開 HTML、CSS 和 JavaScript

將所有 HTML、CSS 和 JavaScript 程式碼集中在一個檔案中，您的專案就能派上用場難以閱讀及開發雖然 Apps Script 要求將用戶端程式碼放在 .html 檔案中，但您仍可將 CSS 和用戶端 JavaScript 分開至不同的檔案，然後透過自訂函式將這些檔案納入主要 HTML 頁面。

下方範例會在include() 匯入 Stylesheet.html 和 JavaScript.html 檔案內容的 Code.gs 檔案並貼到 Page.html 檔案中使用以下方式呼叫時：列印指令碼這個函式會將指定的檔案內容匯入目前的檔案。通知納入的檔案內含 <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>

使用 HTTPS 載入資源

如果您的網頁是使用較新的 IFRAME 提供，沙箱模式，包括未使用 HTTPS 提供的 JavaScript 或 CSS 檔案會導致錯誤，例如下方列舉一個函式

複合型內容：系統透過 HTTPS 載入「https://...」頁面，但要求不安全的指令碼「http://...」。已封鎖這項要求；內容就必須透過 HTTPS 提供

大多數熱門的程式庫都支援 HTTP 和 HTTPS，因此通常會在切換時您只需在網址後方插入並貼到網址中。

使用 HTML5 文件類型宣告

如果網頁是使用較新的 IFRAME 沙箱模式提供服務，請務必在 HTML 檔案頂端加入下列程式碼片段。

<!DOCTYPE html>

這個文件類型宣告會告訴瀏覽器，您是為新式瀏覽器設計網頁，因此不應使用相容模式轉譯網頁。即使不打算來使用現代 HTML5 元素或 JavaScript API，這將確保網頁正確顯示

最後載入 JavaScript

許多網頁開發人員都建議在網頁底部載入 JavaScript 程式碼增加回應速度，但這對於 HTML 程式碼而言更加重要課程中也會快速介紹 Memorystore 這是 Google Cloud 的全代管 Redis 服務如果將 <script> 標記移至網頁結尾，就能 HTML 程式碼也就是在處理 JavaScript 之前轉譯內容，因此您可以呈現旋轉圖示或其他訊息給使用者

利用 jQuery

jQuery 是一個熱門的 JavaScript 程式庫，許多常見的網頁開發工作