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 xây dựng ứ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. Thậm chí bạn có thể sử dụng chuỗi này để tạo phần 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 HTML, CSS và JavaScript 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 có sẵn, 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 gửi trang đến người dùng — tương tự như PHP — như đã 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 hàm doGet() giúp 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 có 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 một ứ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 tạo bằng Google Sites.

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 được liên kết với 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ị cho người chỉnh sửa mở biểu mẫu để sửa đổi biểu mẫu, chứ không hiển thị cho 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 riêng 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 tập lệnh đó. Thay vào đó, hàm mở giao diện người dùng phải chuyển tệp HTML dưới dạng đối tượng HtmlOutput đến 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 có một vài tính năng bổ sung để thuận tiện cho bạn: hàm onOpen() tạo 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 (thao tá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 lần bạn mở tệp. Chọn Dialog > Open (Hộp thoại > Mở) để xem giao diện.