Google Apps Script提交按钮关闭对话框后自动重开问题求助

问题描述 #

编写了一个Google Apps Script函数，实现用户从下拉列表选择名称，点击提交后关闭对话框并将所选名称写入单元格A1，但对话框会自动重新打开。尝试多种方法均未解决。

初始代码 #

GS代码 #

function selectName(name) {
  //Select a name from the list 
  var html = HtmlService.createHtmlOutputFromFile('nameSelector')
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
    .setWidth(400)
    .setHeight(200);
  SpreadsheetApp.getUi().showModalDialog(html, 'Select Name:');
  if(name ==null)return; //skip the process while value is null
 
  //Set the selected value to cell A1
  var ss = SpreadsheetApp.getActiveSpreadsheet();
    ss.getRange("A1").setValue(name);
};

对应HTML代码 #

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <label for="name">Select a name:</label> <br/>
    <select title="Selection list" id="name" standart>
      <option value="no_choice">Click here to select</option>
      <option value='Name 1'>Name 1</option>
      <option value='Name 2'>Name 2</option>
      <option value='Name 3'>Name 3</option>
      <option value='Name 4'>Name 4</option>
      <option value='Name 5'>Name 5</option>
    </select>

    <input type="button" value="Submit" class="action" onclick="form_data()" >
    <input type="button" value="Close" onclick="google.script.host.close()" />

    <script>
    function form_data() { 
      var choice=document.getElementById('name').value;
      google.script.run.selectName(choice);
      google.script.host.close();
    }
    </script> 
  </body>
</html>

尝试过的无效方案 #

1. 将host.close()放入SuccessHandler：

<script>
function form_data() { 
  var choice=document.getElementById('name').value;
  google.script.run.withSuccessHandler(google.script.host.close()).selectName(choice);
}
</script>

结果：对话框仍自动重新打开

2. 封装host.close()到单独函数：

<script>
function form_data() { 
  var choice=document.getElementById('name').value;
  google.script.run.withSuccessHandler(closeHelp()).selectName(choice);
}

function closeHelp(){
  google.script.host.close();
} 
</script>

结果：对话框仍自动重新打开

3. 另一种按钮绑定方式：

<input type="button" value="Submit" onclick="google.script.run.withSuccessHandler(google.script.host.close()).form_data(this.parentNode);google.script.host.editor.focus();" /> 
<input type="button" value="Close" onclick="google.script.host.close()" />

<script>
function form_data() { 
  var choice=document.getElementById('name').value;
  google.script.run.selectName(choice);
}
</script>

结果：对话框能关闭，但数据无法写入工作表

问题根源 #

初始selectName函数存在逻辑错误：每次调用该函数时，都会先执行显示对话框的代码。当HTML页面通过google.script.run.selectName(choice)提交数据时，会再次触发对话框显示，导致提交后对话框重新打开。此外，之前使用withSuccessHandler时错误地传递了函数执行结果（如closeHelp()），而非函数引用。

有效解决方案 #

修改后的GS代码 #

将显示对话框和处理数据的逻辑拆分为两个独立函数：

// 仅负责显示选择对话框
function showNameSelector() {
  var html = HtmlService.createHtmlOutputFromFile('nameSelector')
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
    .setWidth(400)
    .setHeight(200);
  SpreadsheetApp.getUi().showModalDialog(html, 'Select Name:');
}

// 仅负责将选中名称写入单元格
function selectName(name) {
  if(name == null || name === "no_choice") return; // 跳过空值或未选择状态
 
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  ss.getRange("A1").setValue(name);
};

修改后的HTML代码 #

正确使用withSuccessHandler传递函数引用，确保数据写入成功后再关闭对话框：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <label for="name">Select a name:</label> <br/>
    <select title="Selection list" id="name">
      <option value="no_choice">Click here to select</option>
      <option value='Name 1'>Name 1</option>
      <option value='Name 2'>Name 2</option>
      <option value='Name 3'>Name 3</option>
      <option value='Name 4'>Name 4</option>
      <option value='Name 5'>Name 5</option>
    </select>

    <input type="button" value="Submit" class="action" onclick="form_data()" >
    <input type="button" value="Close" onclick="google.script.host.close()" />

    <script>
    function form_data() { 
      var choice = document.getElementById('name').value;
      google.script.run
        .withSuccessHandler(function() {
          google.script.host.close();
        })
        .selectName(choice);
    }
    </script> 
  </body>
</html>

使用说明 #

1. 运行showNameSelector函数打开选择对话框；
2. 选择名称后点击提交，数据会写入单元格A1，对话框自动关闭且不会重新打开。

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