如何在Google Apps Script中动态更新已运行的Google Sheets模态对话框？

问题描述 #

我想在Google Sheets中创建模板化模态对话框，用于显示后台运行脚本的信息，实现类似控制台的动态更新效果。现有代码如下：

前端HTML（test.html） #

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      function update_info (info) {
        document.getElementById("information").innerText = info;
      }
    </script>
  </head>
  <body>
    <div id = "information"></div>
  </body>
</html>

后端脚本（Code.gs） #

function show_popup () {
    let htmlTemplate = HtmlService.createTemplateFromFile('test.html');
    let html = htmlTemplate
      .evaluate()
      .setWidth(500)
      .setHeight(100);
    SpreadsheetApp.getUi()
      .showModalDialog(html, ' ');
}

当前采用隐藏工作表存储状态，弹窗每10秒通过google.script.run检查更新的方案，希望找到更高效的替代方法。

更优解决方案 #

由于Google Apps Script不支持服务器主动推送（WebSocket），最优方案是基于**脚本属性（Script Properties）**的高效轮询，替代隐藏工作表方案，同时优化轮询逻辑：

1. 服务器端脚本优化（Code.gs） #

用脚本属性存储运行状态，读写效率远高于工作表操作：

// 后台长运行脚本，执行过程中更新状态
function longRunningScript() {
  const props = PropertiesService.getScriptProperties();
  
  // 初始化状态
  props.setProperty('scriptStatus', '开始执行...');
  
  // 模拟执行步骤1
  Utilities.sleep(2000);
  props.setProperty('scriptStatus', '完成数据初始化');
  
  // 模拟执行步骤2
  Utilities.sleep(2000);
  props.setProperty('scriptStatus', '处理表格数据中');
  
  // 执行完成
  props.setProperty('scriptStatus', '执行完成！');
  Utilities.sleep(1000);
  props.deleteProperty('scriptStatus');
}

// 供客户端调用，获取当前脚本状态
function getScriptStatus() {
  const props = PropertiesService.getScriptProperties();
  return props.getProperty('scriptStatus') || '等待脚本启动...';
}

// 显示模态对话框
function show_popup() {
  let html = HtmlService.createHtmlOutputFromFile('test.html')
    .setWidth(500)
    .setHeight(100);
  SpreadsheetApp.getUi().showModalDialog(html, '脚本执行控制台');
}

2. 前端HTML优化（test.html） #

实现链式轮询逻辑，避免固定间隔的冗余请求，执行完成后自动关闭弹窗：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      function update_info(info) {
        document.getElementById("information").innerText = info;
        
        // 执行完成后自动关闭弹窗
        if (info === '执行完成！') {
          setTimeout(() => google.script.host.close(), 1000);
          return;
        }
        
        // 链式发起下一次状态查询，间隔可按需调整
        setTimeout(fetchStatus, 1500);
      }

      function fetchStatus() {
        google.script.run
          .withSuccessHandler(update_info)
          .getScriptStatus();
      }

      // 页面加载后立即开始轮询
      window.onload = fetchStatus;
    </script>
  </head>
  <body>
    <div id="information"></div>
  </body>
</html>

3. 超长脚本处理（超过6分钟） #

若脚本单次执行时长超过Google Apps Script的6分钟限制，需拆分为多个步骤，结合时间驱动触发器实现：

• 将长脚本拆分为多个独立小函数（如step1()、step2()）
• 每个步骤执行后更新脚本属性状态
• 用ScriptApp.newTrigger()创建时间驱动触发器，触发下一个步骤
• 客户端仍通过轮询脚本属性获取实时状态

方案优势 #

• 高效读写：脚本属性是内存级键值存储，比工作表操作快数十倍，无表格资源占用
• 逻辑简洁：链式轮询避免固定间隔的无效请求，可根据状态动态调整查询频率
• 无冗余记录：不会产生工作表编辑历史，保持表格整洁

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