Google Apps Script 单HTML加载弹窗按需无按钮关闭方案

需要实现可全局复用的「Loader 360」加载提示组件，满足以下要求：

• 仅维护1份加载器对应的HTML文件
• 加载器可在不同业务函数中直接复用
• 执行流程为：触发业务函数→唤起加载提示弹窗→业务执行完成后关闭弹窗

原有方案维护了3份内容高度重复的HTML文件、3个冗余后端函数，每新增一个业务函数还需要单独编写绑定自动关闭逻辑的HTML，多业务场景下维护成本极高。

问题根源是原有逻辑错误采用「打开新弹窗覆盖旧弹窗」的方式实现关闭效果，完全不需要冗余文件，单份加载器HTML+3个通用后端方法即可覆盖所有复用场景。

1. 精简加载器文件 #

删除CloseLoader360.html和所有单业务绑定的临时HTML文件，只保留1份Loader360.html，代码修改如下：

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport">
  <style>
    .loader {
      border: 16px solid #f3f3f3;
      border-radius: 50%;
      border-top: 16px solid #3498db;
      width: 120px;
      height: 120px;
      -webkit-animation: spin 2s linear infinite;
      animation: spin 1s linear infinite;
      margin: 0 auto;
    }
    @-webkit-keyframes spin {
      0% { -webkit-transform: rotate(0deg); }
      100% { -webkit-transform: rotate(360deg); }
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
  </style>
</head>
<body>
  <div class="loader"></div>
  <script>
    // 页面加载后自动查询后端任务状态，完成后自动关闭弹窗
    google.script.run
      .withSuccessHandler(() => google.script.host.close())
      .waitForTaskFinish();
  </script>
</body>
</html>

2. 重写后端通用逻辑 #

删除原有冗余的closeLoader和单业务绑定函数，新增全局任务状态标记，仅保留3个通用方法，所有业务函数可直接复用，无需单独编写绑定逻辑：

// 全局任务状态标记
let isTaskDone = false;

/**
 * 唤起加载弹窗
 */
function runLoader() {
  isTaskDone = false;
  const loaderHtml = HtmlService
    .createHtmlOutputFromFile('Loader360')
    .setWidth(215)
    .setHeight(200);
  SpreadsheetApp.getUi().showModalDialog(loaderHtml, 'Loading...');
}

/**
 * 供前端弹窗轮询任务状态的接口
 */
function waitForTaskFinish() {
  // 100ms轮询一次，用户无感知，性能消耗可忽略
  while (!isTaskDone) {
    Utilities.sleep(100);
  }
  return true;
}

/**
 * 关闭加载弹窗
 */
function closeLoader() {
  isTaskDone = true;
}

3. 业务层调用方式 #

业务代码不需要做特殊适配，和原有调用逻辑完全一致，无论对接多少个业务函数都不需要新增代码：

function onEdit(e) {
  const activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  const activeSheet = activeSpreadsheet.getActiveSheet();
  const modifyRow = SpreadsheetApp.getActiveRange().getRow();
  const modifyCol = SpreadsheetApp.getActiveRange().getColumn();

  if (modifyRow === 1 && modifyCol === 1) {
    runLoader();
    setDescription(); // 原有业务逻辑无需改动
    closeLoader();
  } else {
    runLoader();
    usePainter(); // 原有业务逻辑无需改动
    closeLoader();
  }
}

注意事项 #

• 方案完全匹配预期执行流程，没有额外的学习成本
• 全程仅需维护1份HTML文件，无重复样式代码
• 原有示例代码存在两处笔误：preadsheetApp缺失首字母S、activeSpreadsheet未定义，上述调用示例已修正
• Google Apps Script 不支持服务端主动向前端推送消息，100ms间隔的短轮询是当前场景下最轻量的实现方案，无明显性能开销
• 如果单业务函数执行时间超过GAS平台6分钟的单次执行上限，需要自行拆分长任务，属于平台本身的限制，与加载器逻辑无关

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