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 bezpośrednio; 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. */ ?>