Question

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

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

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

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

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

我搜索并搜索了这些问题的答案，并且发现了一个真正有效的项目示例。

感谢您提供任何帮助。

Answer 1

有关如何在Google Apps脚本中使用多个HTML网页的示例，请参阅this answer。

Answer 2

我认为你正在尝试对我做类似的事情。基本上我需要一个允许你登录的系统，然后在你登录后提供额外的数据。所以我开始使用基本表格，然后点击你正在谈论的墙，似乎无法加载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();
 }

<强> 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>

Google App：同一App Project中的多个HTML或脚本文件？

2 个答案: