Google Sheet自定义Dialog启动屏正文延迟显示，如何强制立即显示？

核心原因 #

问题出在Google Apps Script的单线程执行机制：调用ui.showModalDialog()后，若后续还有同步脚本在执行，浏览器会优先完成所有服务器端脚本，再渲染对话框的HTML内容，导致正文延迟显示。

解决方案 #

1. 用独立HTML文件构建对话框（推荐）

把对话框内容单独存为HTML文件，提升加载渲染效率，避免字符串拼接的延迟：

• 在脚本编辑器新建HTML文件（命名为SplashScreen.html）：

<!DOCTYPE html>
<html>
  <body>
    <p style="font-size: 16px; font-family: Arial, sans-serif;">
      <?= msgText ?>
    </p>
    <script>
      // 页面加载完成后立即触发，确保内容显示
      window.onload = () => {
        document.body.style.visibility = 'visible';
      };
    </script>
  </body>
</html>

• 在GS脚本中调用：

function showSplashScreen(msgText, titleText, width, height) {
  const ui = SpreadsheetApp.getUi();
  const htmlOutput = HtmlService.createTemplateFromFile('SplashScreen')
    .evaluate()
    .setWidth(width)
    .setHeight(height);
  ui.showModalDialog(htmlOutput, titleText);

  // 后续业务逻辑用异步延迟执行，不阻塞UI渲染
  setTimeout(() => {
    runYourMainLogic();
  }, 100);
}

function runYourMainLogic() {
  // 这里放你的核心业务代码
}

2. 直接在HTML字符串中加入即时渲染脚本

不想单独建HTML文件的话，可在原有HTML字符串中嵌入脚本强制渲染：

let htmlOutput = HtmlService
  .createHtmlOutput(`
    <p style="font-size: 16px; font-family: Arial, sans-serif;">${msgTextHTML}</p>
    <script>document.body.style.display = 'block';</script>
  `)
  .setWidth(width)
  .setHeight(height);
ui.showModalDialog(htmlOutput, titleText);

// 后续代码异步执行
setTimeout(() => {
  // 你的后续操作
}, 50);

3. 分离对话框显示与业务逻辑

确保showModalDialog()是当前函数最后同步执行的代码，若需后续逻辑，从前端触发后端脚本：

<!-- 在对话框HTML中加入触发逻辑 -->
<script>
  // 对话框显示后立即调用后端业务脚本
  google.script.run
    .withSuccessHandler(() => {
      // 逻辑完成后可关闭对话框
      google.script.host.close();
    })
    .runYourMainLogic();
</script>

关键注意点 #

• 不要在showModalDialog()后立即执行大量同步代码，会阻塞UI渲染
• 利用前端脚本优先执行的特性，确保正文内容先显示
• 异步处理后续业务逻辑，给对话框预留足够渲染时间

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