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

Question

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

<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，返回它，然后使用客户端 JavaScript 将 HTML 注入到该 P 标记中。

Reference Guide- Google Documentation - Client side API

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

Documentation innerHTML - Mozilla