Google Apps 脚本 HtmlService 嵌套 createHtmlOutputFromFile 以创建 JQuery

Question

我对此很陌生。

我使用 Google Apps 脚本创建了一个 JQuery WebApp，这对我来说是全新的和令人兴奋的。 在过去的几天里，我阅读和学习了很多东西，试着把事情放在一起。

我的出发点是一些示例，并从这里和那里获取了一些部分，最后让它运行起来。

但是有很多问题，我最大的一个问题是构建 HTML 的东西。

应用程序使用不同的 JQuery 页面和导航栏来更改/访问它们。 我的第一个想法是只对导航栏进行一次编码，并将其动态包含在所需的位置。但我无法让它工作。

这是我得到的：

代码.gs

  var template = HtmlService.createTemplateFromFile('Index');
  return template.evaluate()
      .setTitle('myAPP')
  .setSandboxMode(HtmlService.SandboxMode.IFRAME);

索引.html

  <!-- Include meta tag to ensure proper rendering and touch zooming -->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">
  <!-- Include jQuery Mobile stylesheets -->
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">

  <!-- Include the jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <!-- Include the jQuery Mobile library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>

<!-- Store data passed to template here, so it is available to the
     imported JavaScript. -->
<script>
  var access_token = <?= access_token ?>;
</script>



<!-- Use a templated HTML printing scriptlet to import JavaScript. -->
<?!= HtmlService.createHtmlOutputFromFile('Script').getContent(); ?>

Script.html

这里是我使用的所有 JQuery 代码。 在他想要包含导航栏的时候，我尝试与上述相同：

<?!= HtmlService.createHtmlOutputFromFile('Navbar').getContent(); ?>

但它不起作用。我还尝试将其包含到<script> ... </script>

我真的不明白为什么它第一次起作用，但第二次嵌套时不起作用。

===== 编辑 - 这是我的演示 ====

https://script.google.com/d/1jwKy9OJp5jD95NkaAwLFTs0LPSxlP9eW2iWdNXuizfFxaKGw-iWZBV3z/edit?usp=sharing

您可以在 JQuery.html 的第 5 行看到我想要“包含”导航栏的位置。

===== 干杯，

海子

Answer 1

我使用它来工作：

索引.html

<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">

<!-- Include the jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>

<!-- Store data passed to template here, so it is available to the
 imported JavaScript. -->

<?!= include('JQuery'); ?>
<?!= include('Navbar'); ?>

code.gs

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