将Google Apps HTMLService页面分成多个.html文件

Question

我想将一些相关的HTMLService接口合并到一个标签页中。我可以让标签工作using the code here。但我想将每个Tab的页面放入项目中的不同html文件中。我如何在下面的div中显示Billets.html？基本上将“放在这里的方坯位置”替换为html文件的内容。我的目标是有一个加载的Main.html文件，并显示各种任务的选项卡，使用不同文件的每个选项卡的内容来更好地组织项目。 Iam还希望让每个项目加载到最有效的庄园中，这意味着在选择标签时加载（可能永远不会被给定用户选择）或者在开始时加载所有项目。

<div id="tabs-2">
  <p>Put the Billet Locations App here</p>
</div>

Answer 1

两个基本策略是：

• 首次加载页面时注入所有HTML
• 在页面加载后注入HTML （例如，当用户点击标签时）

第一个策略可以通过scriptlet完成：

HTML Service: Templating

的index.html

//include is the name of a function
<div id="tabs-2">
  <?!= include("HTML_Tab2"); ?> //HTML_Tab2 is name of HTML file
</div>

code.gs

doGet() {
  var template = HtmlService.createTemplateFromFile("index");

  return template
    .evaluate() // evaluate MUST come before setting the sandbox mode
    .setTitle("nameOfApp")
    .setSandboxMode(HtmlService.SandboxMode.IFRAME); //Also NATIVE
};

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

为了使scriptlet正确运行，必须使用HtmlService方法createTemplateFromFile()。因为index.html文件中有一个scriptlet，所以它是一个模板。

另一个选项包括对服务器进行单独google.script.run调用，获取HTML，返回HTML，然后使用客户端javascript将HTML注入到P标记中。

Reference Guide- Google Documentation - Client side API

对于该选项，您需要使用类似DOM属性innerHTML或textContent的内容来注入HTML。

Documentation innerHTML - Mozilla