AppScript模态框调用JS函数提示未定义问题求助

问题核心原因 #

导致函数未定义的主要原因有两个：

• 未正确实现include函数，无法将TemplateSelectJS的代码注入到HTML页面中
• 前端JS代码存在逻辑错误，同时HTML结构可能导致JS加载时机异常

解决方案 #

1. 实现include加载函数 #

在你的.gs代码文件中必须添加include函数，用于加载外部HTML/CSS/JS文件内容：

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

如果缺少这个函数，<?!= include('TemplateSelectJS'); ?>会无法输出JS代码，页面自然找不到对应的函数。

2. 调整HTML结构 #

将JS代码的引入放在<body>标签内部的末尾（按钮之后），确保DOM元素加载完成后JS代码才被解析：

<!DOCTYPE html>
<html>
<head>
  <base target="_top"/>
  <?!= include('TemplateSelectCSS'); ?>
</head>
<body>
  <p>Which templates do you want to create?</p>
  <ul>
    <li><input type="checkbox" value="makeMonthReviewTemplate_" name="selMR" onchange="addRemoveMR()"/>
      <label for="selMR">Monthly Review</label>
    </li>
    <li>
      <input type="checkbox" value="makeCalendar_" name="selCal" onchange="addRemoveCal()"/>
      <label for="selCal">Calendar</label>
    </li>
    <li>
      <input type="checkbox" value="makeLogTemplate_" name="selLog" onchange="addRemoveLog()"/>
      <label for="selLog">Log</label>
    </li>
    <li>
      <input type="checkbox" value="makeLogExportTemplate_" name="selLogExport" onchange="addRemoveLogEx()"/>
      <label for="selLogExport">Log Export</label>
    </li>
  </ul>
  <button value="OK" onclick="runFunctionList()"> OK </button>
  <!-- 将JS引入移到body内部末尾 -->
  <?!= include('TemplateSelectJS'); ?>
</body>
</html>

3. 修正前端JS逻辑 #

原代码中直接将服务器端函数名作为变量存入数组是错误的，需要存入函数名字符串，并修正google.script.run的调用方式：

<script>
  var functionList =[];
  function addRemoveMR(){
    // 存入函数名字符串，而非未定义的变量
    functionList.push("makeMonthReviewTemplate_");
  }

  function addRemoveCal(){
    functionList.push("makeCalendar_");
  }

  function addRemoveLog(){
    functionList.push("makeLogTemplate_");
  }

  function addRemoveLogEx(){
    functionList.push("makeLogExportTemplate_");
  }

  function runFunctionList(){
    // 通过属性访问的方式调用服务器端函数
    functionList.forEach(func => google.script.run[func]());
    google.script.host.close();
  }
</script>

额外检查点 #

• 确认服务器端的makeMonthReviewTemplate_、makeCalendar_等函数已在.gs文件中正确定义（无需特殊修饰，全局可访问即可）
• 打开浏览器开发者工具（F12）控制台，查看是否有文件拼写错误或加载失败提示

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