!
Sfruttando l'oggetto document
Visualizzare in modo dinamico il contenuto di file HTML in una Web App con Google Apps Script
Nel tutorial 'Pagine Multiple in una Web App con Google Apps Script' ho descritto come è possibile realizzare una Web App in Apps Script strutturata su più di una pagina. Tale approccio prevede il caricamento della pagina della Web App ogni volta che si clicca su un link interno e, tramite un valore passato in querystring, lo script mostra il contenuto di un file HTML piuttosto che un altro.
Tuttavia è possibile passare da un contenuto presente in un file .html a quello all'interno di un altro file (sempre .html) rimanendo all'interno della stessa pagina ovvero, senza che questa debba essere necessariamente ricaricata.
Tale comportamento è possibile avvalendosi dell'oggetto document.
Riporto di seguito i file di esempio che andrò successivamente a dettagliare per definire il funzionamento del sistema:
File main.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}
function newPage(page) {
return HtmlService.createHtmlOutputFromFile(page).getContent()
}File index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<script>
function changePage(page) {
document.open();
document.write(page);
document.close();
}
</script>
<body>
Premi il bottone per completare l'operazione.
<button onclick="google.script.run.withSuccessHandler(changePage).newPage('success')">Invia</button>
</body>
</html>File success.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<script>
function changePage(page) {
document.open();
document.write(page);
document.close();
}
</script>
<body>
Complimenti! Obiettivo raggiunto!
<button onclick="google.script.run.withSuccessHandler(changePage).newPage('index')">Torna alla pagina precedente</button>
</body>
</html>Il cuore dello script che assicura il funzionamento descritto è la seguente funzione che deve essere presente in tutti i file .html (tra i tag script) della nostra Web App:
function changePage(page) {
document.open();
document.write(page);
document.close();
}Questa funzione, che nel caso specifico ho chiamato changePage(), accetta un parametro in ingresso il cui valore deve corrispondere al nome del file HTML che si intende visualizzare.
Il giro completo inizia con il click sull'elemento button il quale, come si evince dal relativo codice (come mostrato poco sotto) esegue una funzione lato server tramite google.script.run (chiamata nell'esempio newPage, presente nel file main.gs) passando come parametro la stringa 'success':
<button onclick="google.script.run.withSuccessHandler(changePage).newPage('success')">Invia</button>La funzione newPage non fa altro che raccogliere il parametro passato (che ricordo deve corrispondere al nome del file .html che si intende visualizzare, nel caso specifico 'success' per indicare di visualizzare il contenuto del file 'success.html') e tramite il metodo createHtmlOutputFromFile del servizio HtmlService recupera il contenuto HTML del file e lo restituisce, in caso non ci siano errori, alla funzione changePage per essere appunto visualizzato nel document.
Nota
Questo tipo di approccio, rispetto a quello indicato nel tutorial 'Pagine Multiple in una Web App con Google Apps Script' ha sicuramente un limite, quello di perdere la possibilità di utilizzare le scriptlet (ad eccezione della prima pagina caricata) perchè quando il browser incontra l'istruzione document.write la interpreta con il linguaggio Javascript (e non con linguaggio server side) stampando direttamente a video il suo contenuto inteso come testo (interpretando anche i tag HTML) senza alcun altro tipo di elaborazione.
Non ci sono commenti
Nessuno ha ancora commentato questo articolo, fallo tu per primo!
scrivi un commento