Google App : 同一个 App Project 中有多个 HTML 或脚本文件？

Question

我是一名经验丰富的 Web 开发人员，因此带有 Google App Scripts 的 Google Web 框架看起来非常适合我。不幸的是，我在撞墙之前并没有走多远。这是最大的一个（现在）。

场景：开发一个简单的应用程序来解决一些我在接触一门新语言时经常使用的编程问题。将每个问题放在单独的页面上。将 css 和 javascript 放在单独的文件中。

这最初工作正常。第一个问题是均值问题的统计均值。我找到了他们从电子表格中读取数据的入门模板，修改了模板以显示数据，然后从那里开始。CSS 很简单，包含在文件中。它只需要初始的 index.html 和 code.gs。

但是现在，我想修改 index.html 以添加链接以调用其他 HTML 文件，App 项目乐于帮助我添加这些文件。我也可以添加更多 .gs 文件。太好了，我想。但是我怎么称呼他们呢？链接需要一个 URL，但我只有一个指向项目的 URL。据我所知，无法引用同一项目中包含的文件。我可以在其他库中调用函数，但不能在此库的另一页上调用。.gs 脚本看起来是服务器端代码。我如何处理和访问客户端 javascript 文件。还是CSS文件？

我在你的网站上找到了这个，但我不知道如何实际使用它。 在 Google Apps Script 网络应用程序中使用项目 Javascript 和 CSS 文件？.

我已经搜索并搜索了这些问题的答案，但在实际工作项目示例中发现的很少。

感谢你给与我的帮助。

Answer 1

我想你正试图对我做类似的事情。基本上，我需要一个允许您登录的系统，然后在您登录后提供其他数据。所以我从一个基本表单开始，然后遇到了您正在谈论的问题，似乎无法加载 HTML 页面。

然后我注意到您可以发回字符串，因此您可以将该字符串放入 div（参见loadPage()），从而显示不同的页面。下面是一个简单的例子，包括处理失败。然后，您可以按预期继续编写页面。因此，您可以将值传递给下一个表单和下一个以生成应用程序。

要使用它，您可以输入任何用户名，它会失败，并显示抛出的错误消息。如果你输入fuzzyjulz用户名，它会显示下一页，包括登录过程中的附加信息。

Code.gs

function doGet() {
  return HtmlService.createTemplateFromFile('Main')
    .evaluate()
    .setSandboxMode(HtmlService.SandboxMode.NATIVE);
}

function onLogin(form) {
  if (form.username == "fuzzyjulz") {
    var template =  HtmlService.createTemplateFromFile('Response');

    //Setup any variables that should be used in the page
    template.firstName = "Fuzzy";
    template.username = form.username;

    return template.evaluate()
      .setSandboxMode(HtmlService.SandboxMode.NATIVE)
      .getContent();
  } else {
    throw "You could not be found in the database please try again.";
  }
}

function include(filename) {
  return HtmlService.createTemplateFromFile(filename)
    .evaluate()
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
    .getContent();
 }

主文件

<?!= include('CSS'); ?>
<script>
  function loadPage(htmlOut) {
    var div = document.getElementById('content');
    div.innerHTML = htmlOut;
    document.getElementById('errors').innerHTML = "";
  }
  function onFailure(error) {
    var errors = document.getElementById('errors');
    errors.innerHTML = error.message;
  }
</script>
<div id="errors"></div>
<div id="content">
  <?!= include('Login'); ?>
</div>

CSS.html

<style>
  p b {
    width: 100px;
    display: inline-block;
  }
</style>

登录.html

<script>
  function onLoginFailure(error) {
    var loginBtn = document.getElementById('loginBtn');
    loginBtn.disabled = false;
    loginBtn.value = 'Login';
    onFailure(error);
  }
</script>
<div class="loginPanel">
  <form>
    <p>
      <b>Username: </b>
      <input type="text" name="username"/>
    </p>
    <input type="button" id="loginBtn" value="Login" onclick="this.disabled = true; this.value = 'Loading...';google.script.run
      .withSuccessHandler(loadPage)
      .withFailureHandler(onLoginFailure)
      .onLogin(this.parentNode)"/>
  </form>
</div>

响应.html

<div class="text">
  Hi <?= firstName ?>,<br/>
  Thanks for logging in as <?= username ?>
</div>