Использовать файлы Javascript и CSS в веб-приложении Google Apps Script?

Если я создаю простое веб-приложение HTML в Google Apps Script, например:

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

и index.html выглядит следующим образом:

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

Можно ли добавить файлы JS и CSS как часть проекта и включить их с помощью script и тегов ссылок, или они должны быть встроены/размещены в другом месте?

Ответы

Ответ 1

Пока что это не значит, что ваши CSS и JS script будут частью вашего проекта Google Apps script. Вам нужно будет разместить его в другом месте и указать URL-адрес в вашем шаблоне.

Ответ 2

Вот обходной путь, который я нашел полезным:

  • Добавьте эту функцию на свой серверный Javascript:

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

  • Добавьте в проект второй файл "html", который содержит только JS или CSS, окруженные тегами <script> или <style>.

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

  • Теперь вы можете включить script в свой основной шаблон HTML следующим образом:

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

Таким образом, вы можете разделить ваши JS и CSS на столько файлов, сколько захотите, и сохранить их все в рамках проекта Apps script.

Ответ 3

Google предоставляет аналогичное решение здесь.

В принципе, они предлагают вам добавить эту функцию в ваш .gs файл:

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

и добавьте один или оба из них в ваш .html файл:

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

имена в кавычках, конечно, относятся к отдельным файлам .html, содержащим ваш код JS или CSS, с тегами <script> или <style>.

Ответ 4

Вы можете напрямую визуализировать файл внутри тега scriptlet.

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

Создайте файл example.js.html в своем проекте script. Хотя рендеринг в теге scriptlet не упоминает расширение ".html"

Ответ 5

У вас не может быть простых файлов js или css в проекте, поэтому вместо этого вы создаете html файлы, которые его содержат, и, предпочтительно, вы помещаете <script> </script> или <style> в эти файлы.

Таким образом, у вас может быть файл с именем myscript.js.html со следующим содержимым:

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

Теперь вы поместите эту строку в HTML, где вы хотите, чтобы актив был включен

Поместите это в HTML, где вы хотите включить актив:

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

Обратите внимание, что ".html" в имени файла опущен.

Если вы собираетесь включить несколько ресурсов, было бы неплохо создать вспомогательную функцию. Вы можете поместить следующую функцию в свой код (gs файл)

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

Затем строку выше можно изменить на:

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

И, наконец, вам также нужно вызвать методубъект оценки() -method HTMLTemplate или код, находящийся внутри <?!=?> В html файле, который не будет оцениваться. Так что, если вы предоставляете HTML файл, например, вот так:

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

Вам просто нужно изменить его на:

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

Если вы использовали createHtmlOutputFromFile, а не createTemplateFromFile до этого, вы должны знать, чтоvalu() возвращает htmlOutput, поэтому, если вам интересно, куда помещать такие вещи, как .setWidth(), тогда это после вызоваvalu().