Question

在这个阶段，我主要用于后端Javascript和服务器端Java，所以我的HTML并不像它需要的那样精明。

我已经构建了几个需要用户输入Apps脚本的应用程序，但我使用的是现已弃用的UI service，因为我不是设计师，这提供了一种简单的方法来设计简单的页面来传递数据来来回回。由于UI服务已被弃用了一段时间，我要求将这些服务迁移到HTML服务这一艰巨的任务，我注意到行为方面存在一些差异。

例如，在提交表单时，整个页面会刷新为空白页面，而我似乎无法阻止这一点。 UI服务将保持静态以便重新输入信息，并且我找不到使HTML服务停止刷新或重新加载表单的工作方法。

重现我的问题的简单代码：

function doGet() {
  return HtmlService.createHtmlOutputFromFile('test')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

function logValues(value){
  Logger.log('Something worked....');
}

索引文件为：

<form>
<input type="submit" value="Book Meeting" onclick="google.script.run
        .logValues()">
</form>

我尝试过的一些事情：

1）向'doGet'函数添加回调，尝试再次加载页面。 2）添加一个全新的功能，尝试调用一个新的HTML页面。

这里的问题是我对HTML服务的理解不足，但是我有一个简单的方法可以清除重新提交的表单，或者只是重新加载页面？我在SO上发现的其他问题都没有以我能理解的方式充分回答这个问题。

Answer 1

由于您在技术上通过单击“提交”按钮提交表单，因此会创建页面刷新。您需要使用preventDefault函数取消提交事件，其中＆＃34;取消事件（如果可取消），而不会停止事件的进一步传播。＆＃34;

请参阅此处的文档：https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

所以也许你可以尝试这些方面的东西（直接来自文档）：

function stopDefAction(evt) {
    evt.preventDefault();
}

document.getElementById('my-checkbox').addEventListener('click', stopDefAction, false);

另一种选择是删除表单/输入元素，只需使用按钮元素，而不会在点击时触发页面刷新。

Answer 2

这是一个有趣的转换旧UI服务的过程，我只是使用我的一个应用程序，它确实提高了代码的可读性。我发布了一份基本版本的副本in another question

一旦你了解它，它就会变得更加简单。这是在提交表单时使用类似于您的示例使用HTMLService的多个HTML文件的一个非常基本的示例（您可以传入参数）

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

阻止HTML页面刷新

2 个答案: