谷歌网络应用程序 - 使用 html 表单提交更新事件参数？
Posted
技术标签:
【中文标题】谷歌网络应用程序 - 使用 html 表单提交更新事件参数？【英文标题】：google web app - Update event parameter with html form submit? 【发布时间】：2021-10-30 14:03:12 【问题描述】：我有一个这样的网络应用：
文件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（也称为电子邮件），用户假设输入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 协作平台时，我能找到同样有效的解决方案。
【问题讨论】：
我开始在这里看到问题：***.com/questions/57148265/… 它有一个叫做 iFrame 的东西：***.com/questions/63551837/… 【参考方案1】：实现一个看起来像按钮的链接
由于Restrictions in IFRAME mode ，您无法通过在同一位置打开新窗口直接重定向到新页面，但您可以在同一窗口中open a link。示例实现：
<!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>
【讨论】：
我不喜欢这个解决方案，因为每次 SomeYadaYada 更改时我们都必须在var baseUrl = "https://script.google.com/a/SomeYadaYada/exec" 编辑代码，嵌入到 Google 协作平台时它也能工作吗？
您无需手动更改"https://script.google.com/a/SomeYadaYada/exec" - 这只是一个示例。实际上，您可以使用ScriptApp.getService().getUrl() 以编程方式检索 WebApp Url。见here。但是，如果您只想显示一个附加的 div 而不是重定向到一个全新的网站/WebApp，那么您的解决方案当然是完全可行的。【参考方案2】：
我想通了，我只需要稍微重新设计我的应用程序。现在我不再使用表单同页提交来发布事件参数，而是完全删除事件参数并使用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>
我喜欢这个解决方案，因为当我将网络应用程序嵌入到 Google 协作平台时，它看起来会起作用，免去了我以后的烦恼。
【讨论】：
以上是关于谷歌网络应用程序 - 使用 html 表单提交更新事件参数？的主要内容，如果未能解决你的问题，请参考以下文章