页面加载时自动将URL参数发送至Google Sheet的实现方法

针对你的需求，有两种简洁的实现方式，既可以基于你现有的表单代码修改，也可以直接构造请求发送，不用依赖表单元素：

方案一：基于现有表单自动提交 #

核心思路是页面加载完成、参数填充完毕后，自动触发表单的提交事件。你之前尝试失败大概率是因为没等DOM完全加载就执行提交，或者时机不对。

修改你的JavaScript代码如下：

// 提取URL参数的工具函数
function getURLParameter(e) {
  return decodeURI((new RegExp(e + "=(.+?)(&|$)").exec(location.search) || [, ""])[1]);
}

// 等DOM所有元素加载完成后再执行操作
document.addEventListener('DOMContentLoaded', function() {
  const form = document.forms['submit-to-google-sheet'];
  const scriptURL = 'https://script.google.com/macros/s/examplescript';

  // 填充URL参数到输入框
  const param1 = getURLParameter("Param1");
  if (param1.includes("@")) {
    document.getElementById("inputBoxParam1").value = param1;
  } else {
    console.log("No Param1 parameter found.");
  }

  const param2 = getURLParameter("Param2");
  if (param2) {
    document.getElementById("inputBoxParam2").value = param2;
  } else {
    console.log("No Param2 parameter found.");
  }

  // 自动触发表单提交
  form.submit();

  // 保留原有的提交事件处理逻辑
  form.addEventListener("submit", e => {
    e.preventDefault();
    fetch(scriptURL, { method: 'POST', body: new FormData(form)})
      .then(response => console.log('Success!', response))
      .catch(error => console.error('Error!', error.message))
  });
});

关键说明 #

• 用DOMContentLoaded确保所有DOM元素都加载完成后再操作，避免出现找不到表单或输入框的错误
• 参数填充完成后调用form.submit()，自动触发提交事件，复用你原本的请求逻辑

方案二：无需表单，直接构造数据发送（更高效） #

如果不需要显示表单给用户，完全可以删掉HTML里的表单元素，直接从URL提取参数后发送请求，减少不必要的DOM开销：

修改后的HTML（可简化） #

<!-- 不需要表单，保留你需要的页面内容即可 -->
<div>页面内容...</div>

对应的JavaScript代码 #

// 提取URL参数的工具函数
function getURLParameter(e) {
  return decodeURI((new RegExp(e + "=(.+?)(&|$)").exec(location.search) || [, ""])[1]);
}

document.addEventListener('DOMContentLoaded', function() {
  const scriptURL = 'https://script.google.com/macros/s/examplescript';
  
  // 直接构造要发送的数据（和表单提交格式一致）
  const formData = new FormData();
  const param1 = getURLParameter("Param1");
  if (param1.includes("@")) {
    formData.append('Param1', param1);
  } else {
    console.log("No Param1 parameter found.");
  }

  const param2 = getURLParameter("Param2");
  if (param2) {
    formData.append('Param2', param2);
  } else {
    console.log("No Param2 parameter found.");
  }

  // 直接发送请求到Google Sheet脚本
  fetch(scriptURL, { method: 'POST', body: formData })
    .then(response => console.log('Success!', response))
    .catch(error => console.error('Error!', error.message));
});

关键说明 #

• 用FormData构造数据，格式和表单提交完全一致，适配Google Sheet脚本的要求
• 不需要依赖表单元素，代码更简洁，页面加载速度更快

注意事项 #

1. 确保Google Sheet的脚本已经按原Demo要求正确部署，且允许外部访问
2. 测试时无需担心跨域问题，原Demo的脚本已经处理了CORS配置
3. 如果参数包含特殊字符，可将decodeURI替换为decodeURIComponent，适配更复杂的编码场景

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