หน้านี้ได้รับการแปลโดย Cloud Translation API

บริการ HTML: สร้างและแสดงผล HTML

บริการ HTML ช่วยให้คุณแสดงหน้าเว็บที่โต้ตอบกับฟังก์ชัน Apps Script ฝั่งเซิร์ฟเวอร์ได้ ซึ่งมีประโยชน์อย่างยิ่ง สำหรับการสร้างเว็บแอปหรือการเพิ่มอินเทอร์เฟซผู้ใช้ที่กำหนดเองใน Google เอกสาร, ชีต และฟอร์ม คุณยังใช้ฟีเจอร์นี้เพื่อสร้างเนื้อหาของอีเมลได้ด้วย

สร้างไฟล์ HTML

หากต้องการเพิ่มไฟล์ HTML ลงในโปรเจ็กต์ Apps Script ให้ทำตามขั้นตอนต่อไปนี้

เปิดเครื่องมือแก้ไข Apps Script
ที่ด้านซ้าย ให้คลิกเพิ่มไฟล์ > HTML

คุณเขียน HTML, CSS และ JavaScript ฝั่งไคลเอ็นต์มาตรฐานส่วนใหญ่ได้ภายในไฟล์ HTML ระบบจะแสดงหน้าเว็บเป็น 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 Sites ได้ด้วย

แสดง HTML เป็นอินเทอร์เฟซผู้ใช้ของ Google เอกสาร, ชีต, สไลด์ หรือฟอร์ม

บริการ HTML สามารถแสดงกล่องโต้ตอบหรือแถบด้านข้าง ใน Google เอกสาร, ชีต, สไลด์ หรือฟอร์มได้ หากสคริปต์เชื่อมโยงกับคอนเทนเนอร์ของไฟล์ (ใน Google ฟอร์ม อินเทอร์เฟซผู้ใช้ที่กำหนดเองจะแสดงต่อผู้แก้ไขที่เปิดแบบฟอร์มเพื่อ แก้ไขเท่านั้น ไม่แสดงต่อผู้ใช้ที่เปิดแบบฟอร์มเพื่อตอบ)

ไม่เหมือนกับเว็บแอป สคริปต์ที่สร้างอินเทอร์เฟซผู้ใช้สำหรับเอกสาร สเปรดชีต หรือแบบฟอร์มไม่จำเป็นต้องมีฟังก์ชัน doGet() โดยเฉพาะ และคุณไม่จำเป็นต้องบันทึกเวอร์ชันของสคริปต์หรือติดตั้งใช้งาน แต่ฟังก์ชัน ที่เปิดอินเทอร์เฟซผู้ใช้ต้องส่งไฟล์ HTML เป็นออบเจ็กต์ HtmlOutput ไปยังเมธอด showModalDialog()) หรือ showSidebar() ของออบเจ็กต์ Ui สำหรับเอกสาร ฟอร์ม หรือ สเปรดชีตที่ใช้งานอยู่

ตัวอย่างเหล่านี้มีฟีเจอร์เพิ่มเติมเพื่อความสะดวก ได้แก่ onOpen() ฟังก์ชันสร้างเมนูที่กำหนดเองเพื่อให้เปิดอินเทอร์เฟซได้ง่าย และปุ่มในไฟล์ HTML จะเรียกใช้เมธอดพิเศษ close() ของ API google.script.host เพื่อปิดอินเทอร์เฟซ

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() ด้วยตนเองในตัวแก้ไขสคริปต์ หรือโหลดหน้าต่างสำหรับตัวแก้ไขเอกสาร ชีต หรือฟอร์มซ้ำ (ซึ่งจะปิดตัวแก้ไขสคริปต์) หลังจากนั้น เมนูที่กำหนดเองจะปรากฏภายในไม่กี่วินาที ทุกครั้งที่คุณเปิดไฟล์ เลือกกล่องโต้ตอบ > เปิดเพื่อดู อินเทอร์เฟซ