如何在SpreadsheetApp中结合showModalDialog与确认按钮实现功能？

问题根源 #

HTML弹窗的按钮点击事件属于客户端（浏览器）执行逻辑，你之前把handleYes()、handleNo()写在了服务器端的GS脚本里，客户端无法直接调用这些服务器端函数，必须通过google.script.run完成客户端与服务器端的通信。

修正后的代码方案 #

方案1：内联HTML（快速调试）

function showDialog() {
  const html = HtmlService.createHtmlOutput(`
    <p>Are You Sure to Process?</p>
    <br>
    <button onclick="handleYes()">YES</button>
    <button onclick="handleNo()">NO</button>
    <script>
      // 客户端逻辑：放在HTML的script标签内
      function handleYes() {
        // 调用服务器端的yesEffect函数
        google.script.run.yesEffect();
        // 关闭当前确认弹窗
        google.script.host.close();
      }
      function handleNo() {
        google.script.host.close();
      }
    </script>
  `);
  SpreadsheetApp.getUi().showModalDialog(html, 'CONFIRMATION');
}

// 服务器端函数：处理YES按钮触发的逻辑
function yesEffect() {
  const htmlOutput = HtmlService
    .createHtmlOutput('<p>Click to Access Drive Home Page<a href="https://drive.google.com/drive/home" target="_blank">OPEN DRIVE HOME PAGE </a></p>')
    .setWidth(300)
    .setHeight(200);
  
  SpreadsheetApp.getUi().showModalDialog(htmlOutput, 'ACCESS DRIVE');
}

方案2：独立HTML文件（更易维护）

1. 在脚本编辑器中新建一个HTML文件（命名为confirmation.html），内容如下：

<p>Are You Sure to Process?</p>
<br>
<button onclick="handleYes()">YES</button>
<button onclick="handleNo()">NO</button>

<script>
function handleYes() {
  google.script.run.yesEffect();
  google.script.host.close();
}

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

2. 服务器端GS代码：

function showDialog() {
  const html = HtmlService.createHtmlOutputFromFile('confirmation.html');
  SpreadsheetApp.getUi().showModalDialog(html, 'CONFIRMATION');
}

function yesEffect() {
  const htmlOutput = HtmlService
    .createHtmlOutput('<p>Click to Access Drive Home Page<a href="https://drive.google.com/drive/home" target="_blank">OPEN DRIVE HOME PAGE </a></p>')
    .setWidth(300)
    .setHeight(200);
  
  SpreadsheetApp.getUi().showModalDialog(htmlOutput, 'ACCESS DRIVE');
}

关键说明 #

• 客户端交互逻辑（按钮点击）必须写在HTML的<script>标签内，属于浏览器端执行的代码
• 调用服务器端函数必须使用google.script.run.函数名()，这是GAS中客户端与服务器端通信的标准方式
• 点击YES后先关闭当前弹窗，再触发后续逻辑，避免弹窗叠加问题

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