Google Apps Script中按钮调用getData函数提示未定义的问题

我明白你卡在这里两天的感受，这个错误其实是Google Apps Script里前端和服务器端代码交互的常见坑——你直接在HTML按钮的onclick里调用getData()，但getData是定义在code.gs里的服务器端函数，前端的JavaScript环境根本找不到它，所以才会报未定义的错误。

要解决这个问题，我们需要用Google提供的google.script.run API来打通前端和服务器端的调用，同时还要修正服务器端函数里的DOM操作错误（服务器端代码根本无法访问前端页面元素）。下面是修改后的完整代码和关键说明：

修改后的HTML文件 #

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <style>
    .dropbtn {
      background-color: #3498DB;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
      cursor: pointer;
    }
    .dropbtn:hover, .dropbtn:focus {
      background-color: #2980B9;
    }
    .dropdown {
      position: relative;
      display: inline-block;
    }
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 160px;
      overflow: auto;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }
    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }
    .dropdown a:hover {background-color: #ddd}
    .show {display:block;}
  </style>
</head>
<body>
  Hello, world!
  <input type="button" value="Close" onclick="google.script.host.close()" />
  <div class="dropdown">
    <button onclick="myFunction()" class="dropbtn">Dropdown</button>
    <div id="myDropdown" class="dropdown-content">
      <a href="#home">Home</a>
      <a href="#about">About</a>
      <a href="#contact">Contact</a>
    </div>
  </div>
  <div class="testButton">
    <!-- 改成调用前端自定义函数，再由它触发服务器端调用 -->
    <button onclick="callGetData()">Gather Data</button>
  </div>
  <p id="testData"></p>

  <script>
    function myFunction() {
      document.getElementById("myDropdown").classList.toggle("show");
    }

    window.onclick = function(event) {
      if (!event.target.matches('.dropbtn')) {
        var dropdowns = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
          var openDropdown = dropdowns[i];
          if (openDropdown.classList.contains('show')) {
            openDropdown.classList.remove('show');
          }
        }
      }
    }

    // 新增前端函数，负责调用服务器端的getData
    function callGetData() {
      // 使用google.script.run调用服务器端函数，指定成功回调
      google.script.run
        .withSuccessHandler(onDataSuccess)
        .getData();
    }

    // 服务器端函数执行成功后，更新前端页面内容
    function onDataSuccess() {
      document.getElementById('testData').innerHTML = 'You have clicked the button!';
    }
  </script>
</body>
</html>

修改后的code.gs文件 #

// 显示侧边栏
function onOpen() {
  SpreadsheetApp.getUi()
    .createMenu('Custom Menu')
    .addItem('Show sidebar', 'showSidebar')
    .addToUi();
}

function showSidebar() {
  var html = HtmlService.createHtmlOutputFromFile('page')
    .setTitle('My custom sidebar')
    .setWidth(300);
  SpreadsheetApp.getUi().showSidebar(html);
}

function getData() {
  Logger.log('This is running');
  // 这里只处理服务器端逻辑，比如读取表格数据
  // 如果需要返回数据给前端，直接return即可，比如：
  // var sheetData = SpreadsheetApp.getActiveSpreadsheet().getRange('check in/invoice!A2:E670').getValues();
  // return sheetData;
}

核心要点提醒 #

• 必须用google.script.run调用服务器端函数：前端和服务器端是完全隔离的环境，不能直接跨环境调用函数，这个API是官方指定的通信桥梁。
• 服务器端不能操作前端DOM：code.gs里的代码运行在Google的服务器上，根本访问不到你的浏览器页面元素，所以原来写在getData里的document.getElementById必须移到前端的回调函数中。
• 回调函数处理结果：如果服务器端函数需要返回数据给前端，直接在GS函数里return数据，然后在withSuccessHandler指定的前端函数里接收并处理即可。

内容的提问来源于stack exchange，提问作者sbalani-rubiyat