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ủ. API này đặc biệt hữu ích khi bạn tạo các ứ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ể dùng tên này để tạo nội dung cho email.

Tạo tệp HTML

Để thêm một 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 phía máy khách chuẩn. 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 sử dụng được, 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 cho người dùng (tương tự như PHP) như đã giải thích trong phần về HTML mẫu.

Phân phối 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 hàm doGet() cho biết cách tập lệnh 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 xong khung cơ bản, bạn chỉ cần lưu 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 một ứng dụng web, bạn cũng có thể nhúng tập lệnh vào một trang web của Google.

Phân phát HTML dưới dạng giao diện người dùng của 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ị một 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 giới hạn trong vùng chứa đối 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 biểu mẫu 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 cụ thể hàm doGet() và bạn không cần lưu phiên bản tập lệnh hoặc triển khai phiên bản đó. Thay vào đó, hàm mở giao diện người dùng phải chuyển tệp HTML của bạn dưới dạng đối tượng HtmlOutput vào 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.

Những 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 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 (trình chỉnh sửa tập lệnh sẽ đóng). 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 > Open (Hộp thoại > Mở) để xem giao diện.