在Google Apps Script中用HTML弹窗创建动态数组的问题排查

我想搭建一个脚本，生成带有6个复选框的弹窗，选中的域名存入数组供其他脚本遍历使用。已经配置好脚本和HTML页面，但HTML中的脚本无法执行：弹窗能正常显示，但无任何输出，既无报错也无日志记录。

原脚本代码 #

function showDomainSelectionDialog() {
  var htmlOutput = HtmlService
      .createHtmlOutputFromFile('PageSelectionDialog')
      .setWidth(300)
      .setHeight(150);
  SpreadsheetApp.getUi().showModalDialog(htmlOutput, 'Select Domains');
  Utilities.sleep(5000);
}

function processSelectedDomains(selectedDomains) {
  // Process the selected domains here
  Logger.log(selectedDomains);
}

function doGet() {
  return HtmlService.createHtmlOutputFromFile('PageSelectionDialog');
}

原HTML代码 #

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      body {
        font-family: 'Arial', sans-serif;
        margin: 10px;
      }
  <body>
  </style>
    <form>
      <div class="column">
        <label><input type="checkbox" name="domain" value="UK"> UK</label>
        <label><input type="checkbox" name="domain" value="DE"> DE</label>
        <label><input type="checkbox" name="domain" value="FR"> FR</label>
      </div>

      <div class="button-container">
        <input type="button" value="OK" onclick="submitForm()">
      </div>
    </form>

    <script>
      function submitForm() {
        var selectedDomains = [];
        var checkboxes = document.getElementsByName('domain');
        for (var i = 0; i < checkboxes.length; i++) {
          if (checkboxes[i].checked) {
            selectedDomains.push(checkboxes[i].value);
          }
        }
        google.script.run.withSuccessHandler(function(result) {
          console.log(result);
        }).processSelectedDomains(selectedDomains);

        // Close the dialog
        google.script.host.close();
      }
    </script>
  </body>
</html>

问题根源 #

1. HTML结构错误：<style>标签未闭合，且<body>标签被错误嵌套在<style>内部，导致浏览器解析DOM混乱，脚本无法正常触发。
2. 弹窗关闭时机冲突：弹窗在google.script.run请求发出后立即关闭，前端控制台来不及输出日志；同时processSelectedDomains无返回值，即使拿到结果也是undefined。
3. 复选框数量不足：原代码仅3个复选框，未满足6个的需求。

修复后的代码 #

修复后的HTML代码（PageSelectionDialog.html）

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      body {
        font-family: 'Arial', sans-serif;
        margin: 10px;
      }
      .column {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 15px;
      }
      .button-container {
        text-align: right;
      }
    </style>
  </head>
  <body>
    <form>
      <div class="column">
        <label><input type="checkbox" name="domain" value="UK"> UK</label>
        <label><input type="checkbox" name="domain" value="DE"> DE</label>
        <label><input type="checkbox" name="domain" value="FR"> FR</label>
        <label><input type="checkbox" name="domain" value="ES"> ES</label>
        <label><input type="checkbox" name="domain" value="IT"> IT</label>
        <label><input type="checkbox" name="domain" value="US"> US</label>
      </div>

      <div class="button-container">
        <input type="button" value="OK" onclick="submitForm()">
      </div>
    </form>

    <script>
      function submitForm() {
        var selectedDomains = [];
        var checkboxes = document.getElementsByName('domain');
        for (var i = 0; i < checkboxes.length; i++) {
          if (checkboxes[i].checked) {
            selectedDomains.push(checkboxes[i].value);
          }
        }
        
        // 请求完成后再关闭弹窗，同时处理成功/失败情况
        google.script.run
          .withSuccessHandler(function(result) {
            console.log('选中的域名：', result);
            alert('已选中：' + result.join(', '));
            google.script.host.close();
          })
          .withFailureHandler(function(error) {
            console.error('出错：', error);
            alert('提交失败：' + error.message);
          })
          .processSelectedDomains(selectedDomains);
      }
    </script>
  </body>
</html>

修复后的Google Apps Script代码

function showDomainSelectionDialog() {
  var htmlOutput = HtmlService
      .createHtmlOutputFromFile('PageSelectionDialog')
      .setWidth(300)
      .setHeight(250); // 调整高度适配6个复选框
  SpreadsheetApp.getUi().showModalDialog(htmlOutput, 'Select Domains');
  // 移除不必要的sleep，避免阻塞脚本执行
}

function processSelectedDomains(selectedDomains) {
  // 处理选中的域名，可在此添加后续业务逻辑
  Logger.log('选中的域名数组：', selectedDomains);
  // 返回选中数组给前端用于成功回调
  return selectedDomains;
}

function doGet() {
  return HtmlService.createHtmlOutputFromFile('PageSelectionDialog');
}

验证方法 #

1. 运行showDomainSelectionDialog函数，弹窗将显示6个复选框。
2. 选中域名后点击OK，会弹出提示框显示选中内容，前端控制台也会输出对应日志。
3. 在Google Apps Script的「查看→日志」中，可看到processSelectedDomains打印的数组内容。

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