无法从 HTML 页面调用 Google WebApps 服务器端函数答案

【问题标题】：Unable to call a Google WebApps server side function from HTML page无法从 HTML 页面调用 Google WebApps 服务器端函数
【发布时间】：2020-11-24 01:25:19
【问题描述】：

我有一个简单的 Google WebApps 脚本。它正在加载一个模态对话框，然后在提交对话框时调用服务器端函数。

这是我的html：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
          function handleFormSubmit(formObject) {
              google.script.run.processForm(formObject);
              google.script.host.close();
      }
    </script>
  </head>
  <body>
  <form id="myForm" onsubmit="handleFormSubmit(this)">
    <table>
    <tr>
    <td>My Team</td>
    <td><input type="text" name="myTeam"/></td>
    </tr>
    </table>
       
    <input type="submit" value="Submit" />
    </form>
  </body>
</html>

这是脚本：

function doGet() {
  var document = DocumentApp.getActiveDocument();
  var ui = document.getBody().appendListItem("hello!")

    DocumentApp.getUi()
      .createMenu('The Bomb')
      .addItem('Simple Kafka Topic', 'sboKafka')
      .addSeparator()
      .addToUi();
}

function sboKafka() {
  var html = HtmlService.createHtmlOutputFromFile('SBOKafka')
      .setWidth(400)
      .setHeight(300);
  
  DocumentApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
      .showModalDialog(html, 'Simple Kafka Topic');
}

function processForm(formObject) {
  Logger.log("processForm");
  var zt = formObject.myTeam;
  DocumentApp.getActiveDocument().getBody().appendListItem(zt)
}

但是，当对话框提交时，服务端函数并没有运行。

我在浏览器错误控制台中看到以下错误。

Unsafe JavaScript attempt to initiate navigation for frame with origin 'https://docs.google.com' from frame with URL 'https://n-e2b764askqfnjofaraeymmf47os6fnoc372huli-0lu-script.googleusercontent.com/userCodeAppPanel'. 

The frame attempting navigation of the top-level window is sandboxed, but the flag of 'allow-top-navigation' or 'allow-top-navigation-by-user-activation' is not set.

知道我做错了什么吗？

更新 1：这就是我测试它的方式......

关闭脚本编辑器窗口和谷歌文档。
转到云端硬盘 -> 打开文档
单击工具 -> 脚本编辑器。这将打开脚本编辑器窗口
转到脚本编辑器窗口
点击运行->运行函数->doGet
返回 Word 文档。点击炸弹 -> 简单的卡夫卡主题
弹出对话框。
在团队名称中输入一个字符串。
提交
什么都没有发生

预期：文档中的文本要更改。

【问题讨论】：

标签： javascript html google-apps-script

【解决方案1】：

我认为在这种情况下，您的问题的原因可能是由于提交了表单。那么作为解决您问题的简单修改，以下修改如何？

模式一：

在此模式中，使用return false。

发件人：

<form id="myForm" onsubmit="handleFormSubmit(this)">

收件人：

<form id="myForm" onsubmit="handleFormSubmit(this); return false;">

在此修改中，返回false。

模式 2：

在此模式中，使用Event.preventDefault()。

发件人：

<form id="myForm" onsubmit="handleFormSubmit(this)">

收件人：

<form id="myForm" onsubmit="event.preventDefault(); handleFormSubmit(this);">

参考资料：

相关线程。
- How to prevent form from being submitted?
Event.preventDefault()

【讨论】：

我认为还需要将preventDefault() 添加到表单提交事件侦听器中，就像在 Google Apps 脚本中关于服务器-客户端通信所做的那样。
@Rubén 感谢您的回复。是的。一开始，我想到了handleFormSubmit(this); return false;和event.preventDefault(); handleFormSubmit(this);这两种模式。当使用handleFormSubmit(this); return false; 时，false 与异步进程一起返回。所以在这种情况下，我认为这个修改可以解决 OP 的问题。但是从您的回复来看，我认为当建议这两种模式时，它们会更有用。所以我添加了它。感谢您一直以来的支持。
感谢大家的回复。但是不，这个建议的解决方法不起作用。
@feroze 感谢您的回复。我带来的不便表示歉意。我必须为我糟糕的技能道歉。不幸的是，来自But no, this suggested workaround doesnt work.，我无法复制您的情况。因为当我使用我建议的修改测试您的脚本时，我可以确认您的错误消息可以被删除。但我愿意支持你。因此，为了正确了解您当前的情况，您能否提供复制当前问题的详细流程？借此，我想确认一下。我再次为我的拙劣技能深表歉意。
我没有尝试PreventDefault事件的压制。我认为这在示例中只是因为他们想在不关闭对话框的情况下显示上传文件的 URL……但我可以尝试。