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

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

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

สร้างไฟล์ HTML

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

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

ในไฟล์ HTML คุณสามารถเขียน HTML มาตรฐาน, CSS และ JavaScript ฝั่งไคลเอ็นต์ได้ หน้าเว็บจะแสดงเป็น HTML5 แม้ว่าฟีเจอร์ขั้นสูงบางรายการของ HTML5 จะไม่พร้อมใช้งาน ตามที่อธิบายไว้ในข้อจํากัด

ไฟล์อาจมีสคริปต์เทมเพลตที่ประมวลผลบนเซิร์ฟเวอร์ก่อนที่หน้าจะส่งไปยังผู้ใช้ ซึ่งคล้ายกับ PHP ตามที่อธิบายไว้ในส่วนบน HTML เทมเพลต

แสดง HTML เป็นเว็บแอป

หากต้องการสร้างเว็บแอปที่มีบริการ HTML โค้ดของคุณต้องมีฟังก์ชัน doGet() ที่บอกสคริปต์เกี่ยวกับวิธีแสดงหน้าเว็บ ฟังก์ชันต้องส่งคืนออบเจ็กต์ HtmlOutput ตามที่แสดงในตัวอย่างนี้

รหัส

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 ไปยังเมธอด showModalDialog()) หรือ showSidebar() ของออบเจ็กต์ Ui สําหรับเอกสาร แบบฟอร์ม หรือสเปรดชีตที่ใช้งานอยู่

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

รหัส

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