Ta strona została przetłumaczona przez Cloud Translation API.

Usługa HTML: sprawdzone metody

Tworzenie interfejsów użytkownika za pomocą usługi HTML opiera się na wielu identycznych wzorcach i praktykami tak jak w przypadku innych rodzajów tworzenia stron internetowych. Istnieją jednak pewne aspekty które są unikalne dla środowiska Apps Script lub mają inną wartość podświetlania. Poniżej omówimy kilka sprawdzonych metod, o których warto pamiętać tworzenia własnych interfejsów użytkownika usługi HTML.

Oddzielny kod HTML, CSS i JavaScript

Przechowywanie wszystkich kodów HTML, CSS i JavaScript w jednym pliku są trudne do odczytania i rozwijania. Apps Script wymaga kodu po stronie klienta umieszczone w plikach .html, nadal możesz oddzielić CSS od strony klienta JavaScript do różnych plików, a następnie umieszczanie ich na głównej stronie HTML dzięki funkcji niestandardowej.

Poniższy przykład definiuje niestandardową funkcję include() po stronie serwera w Code.gs, aby zaimportować zawartość plików Stylesheet.html i JavaScript.html. do pliku Page.html. W przypadku wywołania przy użyciu drukowanie skryptów, ta funkcja importuje określoną zawartość pliku do bieżącego pliku. Uwaga że uwzględnione pliki zawierają tagi <style> i <script>, ponieważ są to fragmenty kodu HTML, a nie czyste pliki CSS czy .js.

Code.gs

function doGet(request) {
  return HtmlService.createTemplateFromFile('Page')
      .evaluate();
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

Page.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include('Stylesheet'); ?>
  </head>
  <body>
    <h1>Welcome</h1>
    <p>Please enjoy this helpful script.</p>
    <?!= include('JavaScript'); ?>
  </body>
</html>

Stylesheet.html

<style>
p {
  color: green;
}
</style>

JavaScript.html

<script>
window.addEventListener('load', function() {
  console.log('Page is loaded');
});
</script>

Ładuj dane asynchronicznie, nie w szablonach

HTML na podstawie szablonu: tworzysz proste interfejsy, ale jego użycie powinno być ograniczone, aby zapewnić responsywnych. Kod w szablonach jest wykonywany jednorazowo przy wczytywaniu strony. Żadne treści nie są wysyłane do klienta przed zakończeniem przetwarzania. Mając długotrwałe zadania w kodzie skryptu mogą powodować powolne działanie interfejsu użytkownika.

Używaj tagów scriptlet do szybkich, jednorazowych zadań, takich jak dodawanie innych treści lub ustawienie wartości statycznych. Pozostałe dane powinny być wczytywane za pomocą google.script.run połączeń. kodowanie w ten sposób asynchroniczny jest trudniejsze, ale umożliwia wczytanie interfejsu użytkownika. szybciej i można zaprezentować wskaźnik postępu wczytywania wiadomości do użytkownika.

Nie – wczytuj w szablonach.

<p>List of things:</p>
<? var things = getLotsOfThings(); ?>
<ul>
  <? for (var i = 0; i < things.length; i++) { ?>
    <li><?= things[i] ?></li>
  <? } ?>
</ul>

Do – ładowanie asynchroniczne.

<p>List of things:</p>
<ul id="things">
    <li>Loading...</li>
</ul>

<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
// The code in this function runs when the page is loaded.
$(function() {
  google.script.run.withSuccessHandler(showThings)
      .getLotsOfThings();
});

function showThings(things) {
  var list = $('#things');
  list.empty();
  for (var i = 0; i < things.length; i++) {
    list.append('<li>' + things[i] + '</li>');
  }
}
</script>

Wczytywanie zasobów przy użyciu protokołu HTTPS

Jeśli Twoja strona jest wyświetlana przy użyciu nowszej wersji IFRAME tryb piaskownicy, w tym Pliki JavaScript lub CSS, które nie są wyświetlane przy użyciu protokołu HTTPS, spowodują wystąpienie błędów takich jak jeden poniżej.

Treść mieszana: strona pod adresem „https://...” została wczytana przez HTTPS, ale zażądał niezabezpieczonego skryptu „http://...”. To żądanie zostało zablokowane; treść musi być wyświetlana przez HTTPS.

Większość popularnych bibliotek obsługuje zarówno protokół HTTP, jak i HTTPS, więc przełączanie się wystarczy dodać element do adresu URL.

Użyj deklaracji typu dokumentu HTML5

Jeśli Twoja strona jest wyświetlana przy użyciu nowszej wersji IFRAME trybie piaskownicy, upewnij się, umieszczasz na początku pliku HTML następujący fragment kodu.

<!DOCTYPE html>

Deklaracja tego typu dokumentu informuje przeglądarkę, dla której strony zaprojektowano daną stronę i że nie powinien renderować strony za pomocą trybie osobliwości. Nawet jeśli nie planujesz wykorzystać nowoczesne elementy HTML5 lub interfejsy API JavaScript. upewnij się, że Twoja strona wyświetla się prawidłowo.

Załaduj JavaScript jako ostatni

Wielu programistów stron internetowych zaleca wczytywanie kodu JavaScript u dołu strony jest większa responsywność. Jest to jeszcze ważniejsze w przypadku kodu HTML posprzedażna. Przeniesienie tagów <script> na koniec strony sprawi, że kod HTML renderuje się przed przetworzeniem JavaScriptu, dzięki czemu można pokazać wskaźnik postępu lub inną wiadomość do użytkownika.

Korzystanie z biblioteki jQuery

jQuery to popularna biblioteka JavaScript, która upraszcza w tworzeniu stron internetowych.