表单调用Google Apps Script时出现ReferenceError: google is undefined错误怎么办？

你遇到的ReferenceError: google is undefined错误，核心原因有两个：

1. 你错误地将Web App的URL作为脚本源引入，这根本不是加载google.script.run所需的客户端库；
2. google.script.run是Google Apps Script的HtmlService专属API，只有当HTML页面由HtmlService渲染输出时，这个对象才会自动注入，独立的外部HTML页面直接调用会找不到该对象。

下面提供两种可行的解决办法：

办法一：将HTML整合到Apps Script项目中 #

这是最贴合google.script.run使用场景的方案：

• 在你的Apps Script项目里新建一个HTML文件（比如命名为index.html），把表单HTML代码完整复制进去；
• 修改Apps Script服务端代码，添加doGet函数用来返回这个HTML页面：

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

• 重新部署Web App，部署选项根据需求调整（比如“执行应用为：我自己”，“谁可以访问应用：任何人，甚至匿名”）；
• 此时HTML页面由HtmlService渲染，google.script.run会自动可用，不需要手动引入额外<script>标签，直接保留原代码中的google.script.run.createCustomFolder(data)调用即可。

办法二：保留独立HTML，改用Fetch调用Web App #

如果不想把HTML放到Apps Script项目里，放弃google.script.run，通过两次Fetch请求完成操作：

1. 修改服务端doPost函数：让它能根据请求参数判断要执行的操作：

function doPost(e) {
  const action = e.parameter.action;
  
  // 处理表单提交
  if (action === 'submitForm') {
    // 这里写你原来处理表单数据的逻辑
    return ContentService.createTextOutput('表单提交成功');
  } 
  // 处理创建文件夹
  else if (action === 'createCustomFolder') {
    const data = e.parameter.data;
    createCustomFolder(data); // 调用你的自定义函数
    return ContentService.createTextOutput('文件夹创建成功');
  }
}

2. 修改客户端HTML代码：在表单提交后，通过Fetch再次请求Web App并传递操作标识：

<script>
window.addEventListener("load", function() {
    const form = document.getElementById('Form-ID-here');
    form.addEventListener("submit", function(e) {
        e.preventDefault();

        const data = new FormData(form);
        data.append('action', 'submitForm'); // 添加操作标识

        data.forEach((value, key) => {
            console.log(key, value);
        })

        const actionUrl = e.target.action;
        fetch(actionUrl, {
            method: 'POST',
            body: data
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! Status: ${response.status}`);
            }
            return response.text();
        })
        .then((submitResult) => {
            console.log(submitResult);
            // 发起创建文件夹的请求
            const folderFormData = new FormData();
            folderFormData.append('action', 'createCustomFolder');
            folderFormData.append('data', '这里传入创建文件夹需要的具体数据');
            
            return fetch(actionUrl, {
                method: 'POST',
                body: folderFormData,
                credentials: 'include' // 如果Web App需要登录，加上这个参数
            });
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! Status: ${response.status}`);
            }
            return response.text();
        })
        .then(folderResult => {
            console.log(folderResult);
        })
        .catch(error => {
            console.error('操作出错:', error);
        });
    })
})
</script>

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