javascript - 将同一 GAS 元素中的 CSS 和 JS 导入电子表格 HtmlOutput

Question

我正在关注 this教程，我正在尝试将 CSS 和 JS 文件导入到 GAS Html 文件中，这两个文件都在同一个元素中。本教程作为一个网络应用程序运行良好，我现在要做的是在关联的电子表格上显示一个具有相同内容的 HtmlOutput。

我尝试在电子表格上创建 HtmlOutput，如下所示:

function test(request){
    var html = HtmlService.createHtmlOutputFromFile('Page');
    ss.show(html);
}

我得到了这个结果(如您所见，getContent 和 include 未按预期工作):

这些是 html、css 和 gs 文件:

代码.gs

//--- this function is called onclick on a Spreadsheet custom menu
function test(request){
    var html = HtmlService.createHtmlOutputFromFile('Page');
    ss.show(html);
}

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

Page.html

<?!= getContent("Stylesheet.html"); ?>

<div>
<h1>Welcome</h1>
<p> test </p>
</div>

<?! include('Javascript'); ?>

样式表.html

<style>
p{ 
    color: green;
} 
</style>
<div>

</div>

Javascript.html

<script>
window.addEventListener("load", function(){
    alert("loaded!");
});
</script>
<div>

</div>

我错过了什么吗？

提前致谢，致以最诚挚的问候

Answer 1

在您尝试使用的教程中

HtmlService.createTemplateFromFile('Page').evaluate();

您必须在电子表格用户界面的上下文中使用相同的方法。

所以，而不是

var html = HtmlService.createHtmlOutputFromFile('Page');
    ss.show(html);

使用

var html = HtmlService.createTemplateFromFile('Page').evaluate();
    ss.show(html);

如果您还像下面这样更改您的 html 文件(使用“include”来包含样式表)，它会起作用:

<?!= include("Stylesheet.html"); ?>

<div>
<h1>Welcome</h1>
<p> test </p>
</div>

<?! include('Javascript'); ?>