Google Apps Script模态菜单中google.script.run调用函数不稳定求助

问题现象 #

生成模态菜单后，点击提交按钮调用google.script.run.processForm1(form)时行为异常：首次提交无法触发后端processForm1函数，立即再次提交则能正常执行，多个账号测试均存在该问题。

相关代码 #

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      body {
        background-color: Gray;
        font-size: 18px;
      }
      input, select, button {
        display: block;
        margin-bottom: 20px;
        font-size: 18px;
      }
      input {
        width: 95%;
        font-size: 16px;
        color: Black;
        font-family: Arial, sans-serif;
        box-sizing: border-box;
        border: groove;
      }
      input::placeholder {
        color: DimGrey;
      }
      label {
        font-family: Arial, sans-serif;
        font-size: 22px;
        color: White;
      }
      select {
        width: 95%;
        font-size: 16px;
        color: Black;
        font-family: Arial, sans-serif;
        box-sizing: border-box;
        border: groove;
      }
      select::value {
        color: DimGrey;
      }
      button {
        background-color: blue;
        color: white;
        font-size: 24px;
        padding: 10px 20px;
        border: none;
        cursor: pointer;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <form id="form1" onsubmit="submitForm1(); return false;">

      <br>

      <label for="warehouse_number">Warehouse Number?</label>
      <input type="text" id="warehouse_number" name="warehouse_number" placeholder="Example: 110" oninput="updateOutput()" required>

      <label for="signal_time">What time was the signal received?</label>
      <input type="text" id="signal_time" name="signal_time" placeholder="Example: 13:31" required><br>

      <label for="zone_number">Zone Number?</label>
      <input type="text" id="zone_number" name="zone_number" placeholder="Example: 123" required><br>

      <label for="zone_description">Zone Description?</label>
      <input type="text" id="zone_description" name="zone_description" placeholder="Example: Receiving Man Door" required><br>

      <label for="camera_check">Camera Check</label>
      <select id="camera_check" name="camera_check" required>
        <option value="" selected>Were camera views available?</option>
        <option value="Yes">Yes</option>
        <option value="No">No</option>
      </select><br>

      <label for="misc_notes">Misc Findings/Notes?</label>
      <input type="text" id="misc_notes" name="misc_notes" placeholder="Example: 'A bird was seen stuck in the tire center.'"><br>

      <button type="submit">Submit</button>
    </form>
    <script>
      function submitForm1() {
        var form = document.getElementById('form1');
        try {
        google.script.run.processForm1(form);
        } catch(err){
          SpreadsheetApp.getUi().alert("Something went wrong!! Please screenshot this and send it to REDACTED - Error Code: " + err);
        }
        google.script.host.close();
      }
    </script>
  </body>
</html>

排查思路与解决方案 #

核心原因 #

google.script.run是异步操作，原代码中google.script.host.close()会在请求未完成时直接关闭模态框，导致通信被中断，这是首次提交失败的关键。

修复方案 #

修改submitForm1函数，利用google.script.run的回调方法，确保请求完成后再关闭模态框，同时修正错误处理逻辑（前端无法直接调用SpreadsheetApp.getUi()）：

function submitForm1() {
  var form = document.getElementById('form1');
  google.script.run
    .withSuccessHandler(function() {
      // 请求成功后关闭模态框
      google.script.host.close();
    })
    .withFailureHandler(function(err) {
      // 前端原生弹窗提示错误
      alert("提交失败！错误信息: " + err.message);
      // 可选：保留模态框让用户重试
      // google.script.host.close();
    })
    .processForm1(form);
}

额外优化点 #

• 服务端验证数据：在processForm1中添加日志，确认是否接收到表单数据：

function processForm1(form) {
  console.log("表单数据已接收:", form);
  // 后续业务逻辑
}

• 防止重复提交：添加加载状态，避免用户多次点击：

<!-- 在表单内添加加载提示 -->
<div id="loading" style="display:none; color:white;">提交中...</div>

<!-- 修改脚本 -->
function submitForm1() {
  var form = document.getElementById('form1');
  var loading = document.getElementById('loading');
  loading.style.display = 'block';
  
  google.script.run
    .withSuccessHandler(function() {
      google.script.host.close();
    })
    .withFailureHandler(function(err) {
      alert("提交失败！错误信息: " + err.message);
      loading.style.display = 'none';
    })
    .processForm1(form);
}

• 环境兼容性：使用Chrome等官方支持的浏览器，测试前清除浏览器缓存。

内容的提问来源于stack exchange，提问作者Drew Workman