如何在本地HTML页面中调用GAS函数并传递用户名、邮箱参数

问题1：非GAS托管环境的JS能否直接调用GAS函数 #

答案是不能。google.script.run 是GAS服务端渲染HTML页面时自动注入的专属API，只有在GAS托管的页面（也就是通过doGet()返回的HTML页面）中才会存在这个全局对象，本地运行的HTML没有注入这个对象，自然会报google is not defined的错误。
如果要从本地页面调用GAS逻辑，只需要把你的GAS部署为符合权限要求的Web应用，本地直接用HTTP请求调用即可，不需要用google.script.run。

问题2：参数传递的两种实现方案 #

你可以根据自己的需求选任意一种方案实现：

方案1：本地页面直接发请求给GAS Web应用（不需要托管HTML到GAS） #

• 第一步：修改GAS端代码，添加doPost方法接收请求参数，示例如下：

function doPost(e) {
  // 配置响应头允许跨域
  const responseHeader = {
    "Content-Type": "application/json",
    "Access-Control-Allow-Origin": "*" 
    // 生产环境建议把*改成你本地页面的访问地址，避免被其他站点恶意调用
  };
  try {
    // 解析请求参数
    const params = JSON.parse(e.postData.contents);
    const name = params.applicantName;
    const email = params.applicantEmail;
    // 这里复用你原来的uploadFile逻辑
    const result = uploadFile(params.content, params.fileName, params.folderId);
    // 返回处理结果
    return ContentService.createTextOutput(JSON.stringify({code:200, data: result})).setHeaders(responseHeader);
  } catch (err) {
    return ContentService.createTextOutput(JSON.stringify({code:500, msg: err.message})).setHeaders(responseHeader);
  }
}

• 第二步：把GAS重新部署为Web应用，权限根据你的使用场景设置，不需要登录的话选「任何人，甚至匿名用户」即可
• 第三步：本地页面JS替换原来的google.script.run代码，用fetch发起请求：

// 替换成你自己的GAS Web应用地址
const GAS_URL = "https://script.google.com/macros/xxxxxx.exec";
async function uploadFiles() {
  const postData = {
    applicantName: document.getElementById("applicantName").value,
    applicantEmail: document.getElementById("applicantEmail").value,
    content: content, // 补全你原来的content参数
    fileName: file.name, // 补全你原来的file参数
    folderId: folderId // 补全你原来的folderId参数
  };
  try {
    const res = await fetch(GAS_URL, {
      method: "POST",
      body: JSON.stringify(postData)
    });
    const result = await res.json();
    // 调用原来的成功回调逻辑
    onFileUploaded(result);
  } catch (err) {
    console.error("请求失败：", err);
  }
}

方案2：用iframe嵌入GAS托管页面传递参数 #

如果你还是想把HTML托管在GAS上，可以通过查询字符串传参：

• 第一步：修改GAS的doGet方法，接收查询参数并注入到HTML模板中：

function doGet(e) {
  // 读取iframe地址携带的参数
  const name = e.parameter.applicantName || "";
  const email = e.parameter.applicantEmail || "";
  // 加载你的HTML模板
  const template = HtmlService.createTemplateFromFile("你的HTML文件名");
  // 把参数注入为模板变量
  template.applicantName = name;
  template.applicantEmail = email;
  // 允许页面被嵌入iframe
  return template.evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

• 第二步：修改托管在GAS上的HTML代码，把参数绑定到输入框：

<input type="text" name="applicantName" id="applicantName" value="<?= applicantName ?>"> 
<input type="text" name="applicantEmail" id="applicantEmail" value="<?= applicantEmail ?>">

• 第三步：本地页面嵌入iframe时，把从数据库拿到的用户名、邮箱拼到GAS页面地址后面即可：

<iframe src="https://script.google.com/macros/xxxxxx.exec?applicantName=张三&applicantEmail=zhangsan@example.com" width="800" height="600"></iframe>

注意：每次修改GAS服务端代码后，都需要重新部署新版本，新的代码才会生效

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