Google表单提交后无法跳转PayPal页面问题求助

问题核心分析 #

你当前的代码中，父页面的<form>标签仅作为Google表单iframe的容器，实际提交动作发生在iframe内部的Google表单中，父页面的submit事件监听器无法穿透iframe捕获内部表单的提交行为——这就是onSubmit函数内日志不显示的根本原因。你误以为google.script.run.processForm()被调用，大概率是测试时的误判，实际该函数并未被触发。此外，即使触发event.preventDefault()，也只会阻止父页面空表单的默认提交，对iframe内的表单完全无效。

解决方案 #

方案1：替换iframe，用Apps Script自建表单（推荐） #

放弃嵌入Google表单的iframe，直接通过HtmlService构建自定义表单，完全掌控提交逻辑：

HTML代码（index.html）

<form id="customForm">
  <!-- 复制原Google表单的字段，示例如下 -->
  <div>
    <label>姓名：</label>
    <input type="text" name="username" required>
  </div>
  <div>
    <label>邮箱：</label>
    <input type="email" name="useremail" required>
  </div>
  <!-- 其他表单字段... -->
  <button type="submit">提交并支付</button>
</form>

JavaScript代码（嵌入index.html）

console.log("页面加载完成，准备处理表单");

window.onload = () => {
  const form = document.getElementById('customForm');
  form.addEventListener('submit', handleSubmit);
};

function handleSubmit(event) {
  event.preventDefault();
  console.log("表单已提交");

  // 收集表单数据
  const formData = new FormData(event.target);
  const data = Object.fromEntries(formData);

  google.script.run
    .withSuccessHandler(paypalUrl => {
      console.log("跳转至PayPal:", paypalUrl);
      if (typeof paypalUrl === "string" && paypalUrl.startsWith("https://")) {
        window.open(paypalUrl, "_self");
      } else {
        alert("错误：无效的PayPal链接");
      }
    })
    .withFailureHandler(error => {
      console.error("表单处理失败:", error);
      alert("提交失败，请重试");
    })
    .processForm(data);
}

Apps Script后端代码（Code.gs）

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

function processForm(formData) {
  // 将表单数据写入Google表格，模拟原Google表单的存储功能
  const sheet = SpreadsheetApp.openById('你的谷歌表格ID').getActiveSheet();
  sheet.appendRow([new Date(), formData.username, formData.useremail]);

  // 返回你的PayPal收款链接
  return "https://www.paypal.com/你的收款路径";
}

方案2：保留iframe，利用Google表单的跳转功能 #

若必须使用iframe嵌入Google表单，可通过Google表单自带的跳转功能实现后续逻辑：

1. 打开目标Google表单，进入「设置」→「呈现」→「提交后」，选择「转到链接」，填入你部署的Apps Script页面URL；
2. 父页面监听iframe的加载事件，判断是否跳转到提交后的页面，再触发PayPal跳转：

父页面代码

<iframe id="googleFormIframe" src="https://docs.google.com/forms/d/e/你的表单ID/viewform?embedded=true" width="640" height="1169" frameborder="0" marginheight="0" marginwidth="0">加载中…</iframe>

<script>
console.log("页面加载完成");

const iframe = document.getElementById('googleFormIframe');
iframe.addEventListener('load', () => {
  const currentUrl = iframe.contentWindow.location.href;
  // 判断是否跳转到了提交后的目标页面（替换为你设置的跳转链接标识）
  if (currentUrl.includes("你的提交后跳转页面特征字符串")) {
    console.log("表单提交完成，跳转至PayPal");
    window.open("https://www.paypal.com/你的收款路径", "_self");
  }
});
</script>

注意：该方法依赖Google表单的跳转逻辑，需确保父页面与iframe域名满足同源策略限制（Google表单与Apps Script域名属于同一主域，可正常监听location变化）。

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