Usługa HTML: szablon HTML

Połączenie kodu Apps Script i HTML umożliwia tworzenie dynamicznych stron wysiłek. Jeśli używasz szablonu, który łączy kod i HTML, np. W językach PHP, ASP lub JSP składnia powinna wyglądać znajomo.

Skrypty

Szablony Apps Script mogą zawierać trzy specjalne tagi, nazywane skryptami. Wewnątrz możesz napisać dowolny kod, który działałby w zwykłym języku Apps Script. plik: skrypty mogą wywoływać funkcje zdefiniowane w innych plikach kodu, odniesienie zmiennych globalnych ani żadnego interfejsu API Apps Script. Możesz nawet określić, funkcji i zmiennych w skryptach, ale nie można ich są wywoływane przez funkcje zdefiniowane w plikach kodu lub innych szablonach.

Jeśli wkleisz poniższy przykład do edytora skryptów, zawartość parametru Tag <?= ... ?> (skrypt do drukowania) pojawi się w kursywą. Ten kod pochylony jest uruchamiany na serwerze przed wyświetleniem strony informacje o użytkowniku. Ponieważ kod skryptu jest wykonywany przed wyświetleniem strony, może być uruchamiany tylko raz na stronie; w przeciwieństwie do JavaScriptu po stronie klienta czy Apps Script funkcje, które wywołujesz google.script.run, skrypty nie mogą wykonaj je ponownie po załadowaniu strony.

Code.gs

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

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Hello, World! The time is <?= new Date() ?>.
  </body>
</html>

Pamiętaj, że funkcja doGet() w kodzie HTML opartym na szablonie różni się od tych w przykładach do tworzenia i wyświetlania podstawowego kodu HTML. Funkcja generuje HtmlTemplate obiekt z kodu HTML , a następnie wywołuje jego evaluate() do i wykonać skrypty i przekonwertować szablon na HtmlOutput obiekt, który skrypt które mogą być wyświetlane użytkownikowi.

Standardowe skrypty

Standardowe skrypty, które używają składni <? ... ?>, wykonują kod bez bezpośrednie wysyłanie treści na stronę. Jednak, jak widać w tym przykładzie, result kodu wewnątrz skryptu wciąż może mieć wpływ na treść HTML poza skryptem:

Code.gs

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

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <? if (true) { ?>
      <p>This will always be served!</p>
    <? } else  { ?>
      <p>This will never be served.</p>
    <? } ?>
  </body>
</html>

Drukowanie skryptów

Skrypty drukowania, które używają składni <?= ... ?>, zwracają wyniki funkcji kod na stronę za pomocą zmiany znaczenia kontekstowego.

Zmiana znaczenia kontekstowego oznacza, że Apps Script śledzi kontekst danych wyjściowych na stronie — w atrybucie HTML, w tagu script po stronie klienta lub inne miejsce – automatycznie dodaje znaki zmieniające znaczenie. ochrony przed atakami typu cross-site scripting (XSS).

W tym przykładzie pierwszy skrypt skryptu bezpośrednio zwraca ciąg znaków. jest ze standardowym skryptem, który tworzy tablicę i pętlę, po której następuje ciąg lub inny skrypt do drukowania, który generuje zawartość tablicy.

Code.gs

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

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <?= 'My favorite Google products:' ?>
    <? var data = ['Gmail', 'Docs', 'Android'];
      for (var i = 0; i < data.length; i++) { ?>
        <b><?= data[i] ?></b>
    <? } ?>
  </body>
</html>

Pamiętaj, że skrypt drukowania zwraca tylko wartość pierwszej instrukcji. wszystkie pozostałe instrukcje zachowują się tak, jakby były zawarte w standardzie skrypt. Na przykład skrypt <?= 'Hello, world!'; 'abc' ?> wydrukuje tekst „Hello, world!”.

Wymuszanie drukowania skryptów

Wymuszone drukowanie skryptów, które używają składni <?!= ... ?>, przypominają drukowanie skrypty, z wyjątkiem tego, że nie mają kontekstowej zmiany znaczenia.

Zmiana znaczenia kontekstowego jest ważna, jeśli skrypt zezwala na dostęp do niezaufanych danych wejściowych użytkownika. Według dla kontrastu, więc musisz wymusić wydrukowanie, jeśli dane wyjściowe skryptu były celowe. zawiera kod HTML lub skrypty, które chcesz wstawić dokładnie w takiej formie.

Ogólnie zalecamy użycie skryptów, które mają być drukowane, a nie wymuszać drukowanie. chyba że musisz wydrukować kod HTML lub JavaScript w niezmienionej formie.

Kod Apps Script w skryptach

Skrypty nie są ograniczone do normalnego uruchamiania JavaScriptu. możesz też użyć dowolnego za pomocą poniższych 3 metod, które zapewnią szablonom dostęp do Apps Script. i skalowalnych danych.

Pamiętaj jednak, że kod szablonu uruchamia się przed wyświetleniem strony. do użytkownika, te techniki przekazują jedynie początkową treść strony. Aby uzyskać dostęp do interaktywnych danych Apps Script ze strony, użyj google.script.run API.

Wywoływanie funkcji Apps Script z szablonu

Skrypty mogą wywoływać dowolną funkcję zdefiniowaną w pliku kodu Apps Script lub bibliotece. Ten przykład pokazuje jeden sposób pobierania danych z arkusza kalkulacyjnego do szablonu, a następnie utworzyć tabelę HTML na podstawie danych.

Code.gs

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

function getData() {
  return SpreadsheetApp
      .openById('1234567890abcdefghijklmnopqrstuvwxyz')
      .getActiveSheet()
      .getDataRange()
      .getValues();
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <? var data = getData(); ?>
    <table>
      <? for (var i = 0; i < data.length; i++) { ?>
        <tr>
          <? for (var j = 0; j < data[i].length; j++) { ?>
            <td><?= data[i][j] ?></td>
          <? } ?>
        </tr>
      <? } ?>
    </table>
  </body>
</html>

Bezpośrednie wywoływanie interfejsów Apps Script API

Możesz też używać kodu Apps Script bezpośrednio w skryptach. Ten przykład daje taki sam efekt jak poprzedni przykład, wczytując dane w za pomocą szablonu, a nie za pomocą osobnej funkcji.

Code.gs

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

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <? var data = SpreadsheetApp
        .openById('1234567890abcdefghijklmnopqrstuvwxyz')
        .getActiveSheet()
        .getDataRange()
        .getValues(); ?>
    <table>
      <? for (var i = 0; i < data.length; i++) { ?>
        <tr>
          <? for (var j = 0; j < data[i].length; j++) { ?>
            <td><?= data[i][j] ?></td>
          <? } ?>
        </tr>
      <? } ?>
    </table>
  </body>
</html>

Przekazywanie zmiennych do szablonów

Możesz też przekazywać zmienne do szablonu, przypisując je jako właściwości. obiektu HtmlTemplate. Jednorazowo Ten przykład daje taki sam efekt jak poprzednie przykłady.

Code.gs

function doGet() {
  var t = HtmlService.createTemplateFromFile('Index');
  t.data = SpreadsheetApp
      .openById('1234567890abcdefghijklmnopqrstuvwxyz')
      .getActiveSheet()
      .getDataRange()
      .getValues();
  return t.evaluate();
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <table>
      <? for (var i = 0; i < data.length; i++) { ?>
        <tr>
          <? for (var j = 0; j < data[i].length; j++) { ?>
            <td><?= data[i][j] ?></td>
          <? } ?>
        </tr>
      <? } ?>
    </table>
  </body>
</html>

Szablony debugowania

Debugowanie szablonów może być trudne, ponieważ napisany przez Ciebie kod nie jest wykonywany directly; Zamiast tego serwer przekształca szablon w kod, a potem wykonuje z powstałym kodem.

Jeśli nie wiesz, jak szablon interpretuje skrypty, metod debugowania w HtmlTemplate zajęcia może Ci pomóc lepiej zrozumieć, co się dzieje.

getCode()

getCode() zwraca błąd ciąg tekstowy zawierający kod, który serwer tworzy na podstawie szablonu. Jeśli Zapisz i wklej go do edytora skryptów, uruchom go debuguj jak zwykle. kod Apps Script.

Oto prosty szablon, który ponownie wyświetla listę produktów Google: po nim wynik funkcji getCode():

Code.gs

function myFunction() {
  Logger.log(HtmlService
      .createTemplateFromFile('Index')
      .getCode());
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <?= 'My favorite Google products:' ?>
    <? var data = ['Gmail', 'Docs', 'Android'];
      for (var i = 0; i < data.length; i++) { ?>
        <b><?= data[i] ?></b>
    <? } ?>
  </body>
</html>

LOG (OCENY)

(function() { var output = HtmlService.initTemplate(); output._ =  '<!DOCTYPE html>\n';
  output._ =  '<html>\n' +
    '  <head>\n' +
    '    <base target=\"_top\">\n' +
    '  </head>\n' +
    '  <body>\n' +
    '    '; output._$ =  'My favorite Google products:' ;
  output._ =  '    ';  var data = ['Gmail', 'Docs', 'Android'];
        for (var i = 0; i < data.length; i++) { ;
  output._ =  '        <b>'; output._$ =  data[i] ; output._ =  '</b>\n';
  output._ =  '    ';  } ;
  output._ =  '  </body>\n';
  output._ =  '</html>';
  /* End of user code */
  return output.$out.append('');
})();

getCodeWithComments()

getCodeWithComments() jest podobny do getCode(), ale zwraca oceniony kod jako komentarze, które są wyświetlane obok oryginalnego szablonu.

Omówienie oceny kodu

Pierwszą rzeczą, jaką zauważysz w obu przykładach ocenionego kodu, jest Obiekt output utworzony przez metodę HtmlService.initTemplate(). Ta metoda nie jest udokumentowany, ponieważ potrzebują go tylko szablony. output to specjalny obiekt HtmlOutput z dwoma właściwości o nietypowej nazwie, _ i _$, które są skrótem nazwy append() i appendUntrusted().

Parametr output ma jeszcze jedną właściwość specjalną, $out, która odnosi się do zwykłego HtmlOutput obiekt, który nie ma tych właściwości specjalnych. Szablon zwraca ten normalny obiekt na końcu kodu.

Skoro znasz już tę składnię, reszta kodu powinna być całkiem prosta. . Jest dołączana treść HTML spoza skryptów (np. tagu b) przy użyciu output._ = (bez mechanizmu zmiany znaczenia kontekstowego), a skrypty są dodawane jako JavaScript (ze zmianą znaczenia kontekstowego lub bez niego w zależności od typu skryptu).

Pamiętaj, że sprawdzany kod zachowuje numery wierszy z szablonu. Jeśli spowoduje błąd podczas uruchamiania ocenionego kodu, wiersz będzie odpowiadać takiej samej treści w szablonie.

Hierarchia komentarzy

Ponieważ oceniony kod zachowuje numery wierszy, możliwe jest dodawanie komentarzy w skryptach, aby dodawać komentarze do innych skryptów, a nawet kodu HTML. Te przykłady ilustrują kilka zaskakujących efektów komentarzy:

<? var x; // a comment ?> This sentence won't print because a comment begins inside a scriptlet on the same line.

<? var y; // ?> <?= "This sentence won't print because a comment begins inside a scriptlet on the same line.";
output.append("This sentence will print because it's on the next line, even though it's in the same scriptlet.”) ?>

<? doSomething(); /* ?>
This entire block is commented out,
even if you add a */ in the HTML
or in a <script> */ </script> tag,
<? until you end the comment inside a scriptlet. */ ?>