google 网络应用程序 - 使用 html 表单提交更新事件参数？

Question

我有一个这样的网络应用程序：

文件Code.gs

function doGet(e) 
{
    var id = e.parameter.id;
    if (id == null || id == "")
    {
        return HtmlService.createHtmlOutputFromFile("InputId");
    }
    else
    {
        return HtmlService.createHtmlOutput("Your id is: "+id);
    }
}

文件InputId.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <form>
      <label for="idEmail">Email:</label>
      <input type="text" id="idEmail" name="id"><br><br>
      <input type="submit" value="Ok">
    </form>
  </body>
</html>

所以网络应用程序是这样工作的：

当用户转到：https://script.google.com/macros/s/SomeYadaYada/dev

页面显示表单 InputId.html 要求用户的 Id（a.k.a 电子邮件），用户应该输入 Id（例如 YadaYada@gmail.com）然后单击按钮确定。

预计： Url 栏重定向到 https://script.google.com/macros/s/SomeYadaYada/dev?id=YadaYada@gmail.com，以便 Web 应用程序显示文本：“您的 ID 是 YadaYada@gmail.com”。

结果： Url 栏重定向到 https://SomeYadaYada-script.googleusercontent.com/userCodeAppPanel?id=YadaYada@gmail.com，Web 应用程序当然不显示任何内容。

我整个上午都在谷歌上搜索解决方案，但我只找到了 the solution“event.preventDefault();”这对我不起作用（它只会阻止页面重新加载，而我需要页面更新事件参数并重新加载）。

如何使用 html 表单提交更新事件参数？还是有更好的方法来解决这个问题？我希望我能找到将网络应用程序嵌入到 Google 站点时也能正常工作的解决方案。

Answer 1

实现一个看起来像按钮的 link

由于 IFRAME 模式的限制您不能通过在同一位置打开新 window 直接重定向到新页面，但您可以 open a link 使用相同的 window.

实施示例：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
  </head>
  <body>
    <form>
      <br>
      <label for="idEmail">Email:</label>
      <input type="text" id="idEmail" name="id"><br><br>
      <a class="btn btn-primary " id="button">Ok</a>
    </form>     
  </body>
  <script>      
    var button = document.getElementById("button")
    button.addEventListener("click", redirect) 
    function redirect(){
      var baseUrl = "https://script.google.com/a/SomeYadaYada/exec"
      var id = document.getElementById("idEmail").value
      button.href = baseUrl + "?id=" + id
      button.click()
    }
    </script>
</html>

Answer 2

我明白了，我只需要稍微重新设计一下我的应用程序。现在，我不再使用表单同页提交到 post 事件参数，而是完全删除事件参数并使用 Google's proposed technique

文件Code.gs

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

function processForm(formObject) 
{
    var id = formObject.id;

    if (id == null || id == "")
    {
        return "Please enter email.";
    }

    return "Your id is: "+id;
}

文件Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      // Prevent forms from submitting.
      function preventFormSubmit() {
        var forms = document.querySelectorAll('form');
        for (var i = 0; i < forms.length; i++) {
          forms[i].addEventListener('submit', function(event) {
            event.preventDefault();
          });
        }
      }
      window.addEventListener('load', preventFormSubmit);

      function handleFormSubmit(formObject) {
        google.script.run.withSuccessHandler(getFormMsg).processForm(formObject);
      }
      function getFormMsg(strMsg) {
        var div = document.getElementById('output');
        div.innerHTML = "<p>"+strMsg+"</p>";
      }
    </script>
  </head>
  <body>
    <form id="myForm" onsubmit="handleFormSubmit(this)">
      <input name="id" type="text" />
      <input type="submit" value="Submit" />
    </form>
    <div id="output"></div>
 </body>
</html>

我喜欢这个解决方案，因为当我将 Web 应用程序嵌入 Google 站点时它看起来会起作用，让我以后不再头疼。

google 网络应用程序 - 使用 html 表单提交更新事件参数？

google web app - Update event parameter with html form submit?

html

forms

google-apps-script

web-applications

url-parameters

实现一个看起来像按钮的 link