项目使用JavaScript和CSS文件在谷歌Apps脚本的Web应用程序?(Use project

2019-06-26 01:25发布

如果我创建在谷歌Apps脚本在简单的HTML的Web应用程序,就像这样:

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文件作为项目的一部分,包括他们使用的脚本和链接标签,或做他们必须是内嵌/别处托管?

Answer 1:

就目前而言,这是不可行的有你的CSS和JS脚本是你的谷歌Apps脚本项目的一部分。 你将不得不在其他地方举办,并在您的模板指向的URL。



Answer 2:

下面是我发现有用的一种变通方法:

  1. 此功能添加到您的服务器端JavaScript:

     function getContent(filename) { return HtmlService.createTemplateFromFile(filename).getRawContent(); } 
  2. 第二个“HTML”文件添加到项目中只包含JS或CSS包围<script><style>标记为适当。

     <!-- myscript.js.html --> <script> alert("Script included!"); </script> 
  3. 现在,您可以在这样你的主HTML模板脚本:

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

通过这种方式,你可以有你的JS和CSS分割为多个文件,只要你喜欢,让他们从Google Apps脚本项目中所有可访问的。



Answer 3:

谷歌提供类似的解决方案在这里 。

基本上,他们建议你添加此功能,您.GS文件:

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

并添加一个或两个的这些你.html文件:

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

在提到分离的.html包含您的JS或CSS代码的文件,当然报价的名字<script><style>标签。



Answer 4:

您可以直接呈现小脚本标签内的文件。

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

创建example.js.html在你的应用程序的脚本项目文件。 虽然呈现在小脚本标签不提的扩展名“.html”



Answer 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') ?>

最后,你还需要调用评估() -内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你应该知道,评估()返回htmlOutput所以,如果你想知道在哪里把东西像.setWidth(),那么它的评估()调用之后。



文章来源: Use project Javascript and CSS files in a Google Apps Script web app?