Google App:同一个App Project中有多个HTML或脚本文件吗? [英] Google App : More than one HTML or script file in the same App Project?

问题描述

我是一位经验丰富的Web开发人员，因此带有Google App脚本的Google Web框架非常适合我.不幸的是，在撞墙之前我走得还很远.这是最大的(现在).

I'm a fairly seasoned web developer, so the Google Web framework with Google App Scripts looks just right for me. Unfortunately, I don't get very far before I hit a wall. Here is the largest one (right now).

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

Scenario: Develop a simple app to solve some a few of the programming problems I always use when I approach a new language. Put each problem on a separate page. Put the css and javascript in separate files.

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

This works fine initially. The first problem is a statistical mean of means problem. I found their starter template for reading data from a spreadsheet, modified the template to show the data, and went from there. CSS was simple and included in the file. It only required the initial index.html and code.gs.

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

But now, I want to modify index.html to add links to call OTHER HTML files, which the App project cheerfully helps me to add. I can add more .gs files as well. Great, I think. But HOW do I call them? A link requires a URL, but the only one I have is to the project. As far as I can tell, there is no way to reference a file included in the same project. I can call a function in some other library but not on another page of this one. The .gs scripts look to be serverside code. What do I do with and access client side javascript files. Or CSS files?

我在您的网站上找到了它，但是我不知道如何实际使用它. 使用项目Javascript和CSS文件在Google Apps脚本网络应用中?.

I found this on your site but I don't have a clue how to actually use it. Use project Javascript and CSS files in a Google Apps Script web app?.

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

I've searched and searched for answers to these questions and have found very little with a real working project example.

谢谢您能给我的帮助.

推荐答案

我认为您正在尝试对我做类似的事情.基本上，我需要一个允许您登录然后在登录后提供其他数据的系统.因此，我从一个基本表单入手，然后碰到您正在谈论的墙，似乎无法加载HTML页面.

I think you are trying to do a similar thing to me. Basically I need a system that allows you to login then provide additional data once you have logged in. So I started out with a basic form and then hit the wall that you are talking about, where it seems to be impossible to load HTML pages.

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

I then noticed that you CAN send back strings, therefore you can put that string into a div(see loadPage()), therefore show different pages. Below is a simple example, including handling failures. You can then keep writing pages as you would expect. So you can pass values to the next form and the next to produce an application.

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

To use this, you can enter in any username and it will fail, showing up a thrown error message. If you type in fuzzyjulz as the username it with show the next page including additional information from the login process.

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或脚本文件吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！