Google App：同一个 App 项目中有多个 HTML 或脚本文件？ [复制]

Question

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

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

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

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

我在您的网站上找到了这个，但我不知道如何实际使用它。 Use project Javascript and CSS files in a Google Apps Script web app?.

我已经搜索并搜索了这些问题的答案，但几乎没有找到真正的工作项目示例。

感谢您能给我的任何帮助。

Answer 1

我认为您正在尝试对我做类似的事情。基本上，我需要一个允许您登录的系统，然后在您登录后提供额外的数据。所以我从一个基本表单开始，然后遇到您正在谈论的墙，似乎无法加载 HTML 页面。

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

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

代码.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();
 }

Main.html

<?!= 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>

Login.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>

Response.html

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