Trang này được dịch bởi Cloud Translation API.

Dịch vụ HTML: Tạo và phân phối HTML

Dịch vụ HTML cho phép bạn phân phát các trang web có thể tương tác với các hàm Apps Script phía máy chủ. Tính năng này đặc biệt hữu ích khi tạo ứng dụng web hoặc thêm giao diện người dùng tuỳ chỉnh trong Google Tài liệu, Trang tính và Biểu mẫu. Bạn thậm chí có thể sử dụng tính năng này để tạo nội dung của email.

Tạo tệp HTML

Để thêm tệp HTML vào dự án Apps Script, hãy làm theo các bước sau:

Mở trình chỉnh sửa Apps Script.
Ở bên trái, hãy nhấp vào biểu tượng Thêm tệp > HTML.

Trong tệp HTML, bạn có thể viết hầu hết các HTML, CSS và JavaScript tiêu chuẩn phía máy khách. Trang sẽ được phân phát dưới dạng HTML5, mặc dù một số tính năng nâng cao của HTML5 không hoạt động, như đã giải thích trong phần Hạn chế.

Tệp của bạn cũng có thể bao gồm các tập lệnh mẫu được xử lý trên máy chủ trước khi trang được gửi đến người dùng — tương tự như PHP — như được giải thích trong phần về HTML mẫu.

Phân phát HTML dưới dạng ứng dụng web

Để tạo một ứng dụng web bằng dịch vụ HTML, mã của bạn phải bao gồm một hàm doGet() để cho tập lệnh biết cách phân phát trang. Hàm phải trả về một đối tượng HtmlOutput, như trong ví dụ này.

Code.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Hello, World!
  </body>
</html>

Sau khi thiết lập khung cơ bản đó, tất cả những gì bạn cần làm là lưu một phiên bản tập lệnh, sau đó triển khai tập lệnh dưới dạng ứng dụng web.

Sau khi tập lệnh được triển khai dưới dạng ứng dụng web, bạn cũng có thể nhúng tập lệnh đó vào Google Sites.

Phân phát HTML dưới dạng giao diện người dùng Google Tài liệu, Trang tính, Trang trình bày hoặc Biểu mẫu

Dịch vụ HTML có thể hiển thị hộp thoại hoặc thanh bên trong Google Tài liệu, Trang tính, Trang trình bày hoặc Biểu mẫu nếu tập lệnh của bạn liên kết với vùng chứa với tệp. (Trong Google Biểu mẫu, giao diện người dùng tuỳ chỉnh chỉ hiển thị với người chỉnh sửa mở biểu mẫu để sửa đổi, chứ không hiển thị với người dùng mở biểu mẫu để trả lời.)

Không giống như ứng dụng web, tập lệnh tạo giao diện người dùng cho tài liệu, bảng tính hoặc biểu mẫu không cần chức năng doGet() cụ thể và bạn không cần lưu phiên bản tập lệnh hoặc triển khai tập lệnh. Thay vào đó, hàm mở giao diện người dùng phải truyền tệp HTML dưới dạng đối tượng HtmlOutput đến các phương thức showModalDialog()) hoặc showSidebar() của đối tượng Ui cho tài liệu, biểu mẫu hoặc bảng tính đang hoạt động.

Các ví dụ này bao gồm một số tính năng bổ sung để thuận tiện: hàm onOpen() tạo một trình đơn tuỳ chỉnh giúp dễ dàng mở giao diện và nút trong tệp HTML gọi một phương thức close() đặc biệt của API google.script.host để đóng giao diện.

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>

Xin lưu ý rằng lần đầu tiên bạn muốn hiển thị giao diện người dùng này, bạn phải chạy hàm onOpen() theo cách thủ công trong trình chỉnh sửa tập lệnh hoặc tải lại cửa sổ cho trình chỉnh sửa Tài liệu, Trang tính hoặc Biểu mẫu (việc này sẽ đóng trình chỉnh sửa tập lệnh). Sau đó, trình đơn tuỳ chỉnh sẽ xuất hiện trong vòng vài giây mỗi khi bạn mở tệp. Chọn Dialog (Hộp thoại) > Open (Mở) để xem giao diện.