Projekt-Javascript und CSS-Dateien in einer Google Apps Script-Webanwendung verwenden?

Question

Wenn ich eine einfache HTML-Webanwendung in Google Apps Script erstelle, etwa so:

function doGet() {
    return HtmlService.createHtmlOutputFromFile("index.html");
}

und index.html sieht so aus:

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<div>Test</div>

Ist es möglich, JS- und CSS-Dateien als Teil des Projekts hinzuzufügen und sie mit Hilfe von Skript- und Link-Tags einzubinden, oder müssen sie an anderer Stelle inline/gehostet werden?

Answer 1

Hier ist eine Lösung, die ich für nützlich halte:

1. Fügen Sie diese Funktion zu Ihrem serverseitigen Javascript hinzu:

   function getContent(filename) {
       return HtmlService.createTemplateFromFile(filename).getRawContent();
   }

2. Fügen Sie eine zweite 'html'-Datei zu Ihrem Projekt hinzu, die nur die JS- oder CSS-Dateien enthält, die von <script> o <style> Tags nach Bedarf.

   <!-- myscript.js.html -->
   <script>
       alert("Script included!");
   </script>

3. Nun können Sie das Skript wie folgt in Ihre Haupt-HTML-Vorlage einfügen:

   <?!= getContent("myscript.js") ?>

Auf diese Weise können Sie Ihr JS und CSS in so viele Dateien aufteilen, wie Sie möchten, und sie alle innerhalb des Apps Script-Projekts zugänglich machen.

Answer 2

Google bietet eine ähnliche Lösung aquí .

Grundsätzlich wird vorgeschlagen, diese Funktion in die .gs-Datei aufzunehmen:

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

und fügen Sie eine oder beide in Ihre .html-Datei ein:

<?!= include('Stylesheet'); ?>
<?!= include('JavaScript'); ?>

die Namen in Anführungszeichen beziehen sich natürlich auf separate .html-Dateien, die Ihren JS- oder CSS-Code mit <script> o <style> Tags.

Answer 3

Sie können keine einfachen JS- oder CSS-Dateien im Projekt haben, also erstellen Sie stattdessen Html-Dateien, die sie enthalten, und platzieren Sie vorzugsweise die < script>< /script> oder < style> innerhalb dieser Dateien.

Sie könnten also eine Datei mit dem Namen myscript.js.html mit dem folgenden Inhalt:

<script>
  alert ("Hello World!");
</script>

Nun fügen Sie diese Zeile in die html-Datei ein, in der das Asset enthalten sein soll

Fügen Sie dies in die Html-Datei ein, in die Sie das Asset einfügen möchten:

<?= HtmlService.createHtmlOutputFromFile('myscript.js').getContent() ?>

Beachten Sie, dass das ".html" im Dateinamen weggelassen wurde.

Wenn Sie eine Reihe von Assets einbeziehen wollen, ist es vielleicht eine gute Idee, eine Hilfsfunktion zu erstellen. Sie können die folgende Funktion in Ihren Code (gs-Datei) einfügen

function include(filename) {
    return HtmlService.createTemplateFromFile(filename).getRawContent();
}

Dann kann die obige Zeile geändert werden in:

<?!= include('myscript.js') ?>

Schließlich müssen Sie auch die evaluate()-Methode des HTMLTemplate aufrufen, da sonst der Code in <?!= ?> in der html-Datei wird nicht ausgewertet. Wenn Sie die Html-Datei also zum Beispiel so ausgeben:

var html=HtmlService.createTemplateFromFile('repeatDialog');
SpreadsheetApp.getUi().showModalDialog(html, 'foo');

Sie müssen es einfach ändern in:

var html=HtmlService.createTemplateFromFile('repeatDialog').evaluate();
SpreadsheetApp.getUi().showModalDialog(html, 'foo');

Wenn Sie createHtmlOutputFromFile und nicht createTemplateFromFile verwendet haben, sollten Sie wissen, dass evaluate() htmlOutput zurückgibt. Wenn Sie sich also fragen, wohin Sie Dinge wie .setWidth() setzen sollen, dann ist das nach dem evaluate()-Aufruf.

Answer 4

Im Moment ist es nicht möglich, Ihr CSS- und JS-Skript als Teil Ihres Google Apps Script-Projekts zu verwenden. Sie müssen es irgendwo anders hosten und die URL in Ihrer Vorlage angeben.

Answer 5

Sie können eine Datei direkt innerhalb eines Scriptlet-Tags rendern.

<?!= HtmlService.createTemplateFromFile("example.js").getRawContent() ?>

Erstellen Sie die example.js.html Datei in Ihrem Apps-Skriptprojekt. Erwähnen Sie beim Rendern im Scriptlet-Tag nicht die Erweiterung ".html".