Google Web App如何通过HTML表单提交更新event查询参数？

问题原因 #

Google Apps Script Web App 的自定义内容默认渲染在googleusercontent.com域名的iframe中，原生表单默认在当前iframe上下文提交，就会跳转到无内容的usercontent域名地址，和你的预期不符。

解决方案 #

你原有Code.gs的逻辑无需修改，只需调整InputId.html的表单配置即可，以下两种方案都同时支持直接访问Web App和嵌入Google Sites的场景：

方案1：静态配置表单（无JS，最简实现） #

直接给表单添加action和target属性，指定提交到你的Web App地址、跳转上下文为顶层页面：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <!-- 替换action的值为你自己的Web App部署地址 -->
    <form action="https://script.google.com/macros/s/SomeYadaYada/dev" method="get" target="_top">
      <label for="idEmail">Email:</label>
      <input type="text" id="idEmail" name="id"><br><br>
      <input type="submit" value="Ok">
    </form>
  </body>
</html>

• 直接访问Web App时，提交后地址栏会更新为带id参数的Web App地址，正常展示结果
• 嵌入Google Sites时，提交后只会刷新Web App所在的iframe，内容正常展示，不会跳转整个站点页面

方案2：动态拼接跳转（无需硬编码Web App地址） #

如果不想把Web App地址写死在代码中，可以用JS拦截表单提交，手动拼接参数后跳转：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <form id="emailForm">
      <label for="idEmail">Email:</label>
      <input type="text" id="idEmail" name="id"><br><br>
      <input type="submit" value="Ok">
    </form>
    <script>
      document.getElementById('emailForm').addEventListener('submit', function(e) {
        e.preventDefault();
        const inputEmail = document.getElementById('idEmail').value.trim();
        if (!inputEmail) return;
        // 替换为你自己的Web App部署地址
        const webAppUrl = 'https://script.google.com/macros/s/SomeYadaYada/dev';
        window.top.location.href = `${webAppUrl}?id=${encodeURIComponent(inputEmail)}`;
      });
    </script>
  </body>
</html>

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