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

Question

我想将一些相关的HTMLService 接口合并到一个标签页中。我可以让选项卡工作 using the code here。但是我想将每个选项卡的页面放入项目中不同的 html 文件中。我如何在下面的 div 中显示 Billets.html？基本上将 "Put the Billet Locations here" 替换为 html 文件的内容。我的目标是让 Main.html 文件加载并显示各种任务的选项卡，对每个选项卡的内容使用不同的文件以更好地组织项目。我还希望以最有效的方式加载每个项目，这意味着要么在选择选项卡时加载（给定用户可能永远不会选择它），要么在开始时全部加载。

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

Answer 1

两个基本策略是：

• 在页面首次加载时注入所有 HTML
• 在 页面加载后 HTML 注入，（就像用户单击选项卡时一样）

第一个策略可以用小脚本完成：

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，返回它，然后使用客户端 javascript 注入 HTML 到那个 P 标签。

Reference Guide- Google Documentation - Client side API

对于该选项，您需要使用 DOM 属性 innerHTML 或 textContent 之类的东西来注入 HTML.

Documentation innerHTML - Mozilla