Question

我遇到了Google Script - Sidebar button keeps opening a new tab中描述的问题。我最初使用的是：

   <input type="submit" value="Submit" />

但是当提交者按照该问题中的描述创建一个新标签时遇到了一个问题。我试图更改帖子中讨论的方法：

<button type='button'>

但这会导致无法点击的按钮：

现在我将其更改回：

<input type="submit" value="Submit" />

现在，我可以在单击时关闭表单，但是当我查看日志时，该表单似乎没有向服务器端提交任何内容。

我该如何进行工作并提交表格？整个模板在下面，应该是独立的：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top" />
    <script>
      // Prevent forms from submitting.
      function preventFormSubmit() {
        var forms = document.querySelectorAll('forms');
        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(google.script.host.close())
          .processRowPopupHTML(formObject);
      }

      function updateUrl(url) {
        var div = document.getElementById('output');
        div.innerHTML = '<a href="' + url + '">Sent!</a>';
      }
    </script>
  </head>

  <body>
    <form id="myForm" onsubmit="handleFormSubmit(this)">
      <div id="texts"></div>

      <div>
        <label for="optionList">Click me</label>
        <select
          id="optionList"
          ondblclick="addText(event)"
          name="optionList"
          size="5"
        >
        </select>
      </div>

      <br />

      <br />

      <div>
        <textarea id="message" name="message" rows="10" cols="30"></textarea>
      </div>
      <div id="textboxes"></div>

      <div id="insert"></div>

      <input type="submit" value="Submit" />
    </form>


    <div id="output"></div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="//rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js"></script>
    <link
      href="//rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.css"
      rel="stylesheet"
    />

    <script>
      //  var canned = <?= canned ?>; //PASSED IN JSON
      var mycannedObj = ['hi', 'hi', 'hi', 'hi', 'hi'];

      function addText(event) {
        var targ = event.target || event.srcElement;
        document.getElementById('message').value +=
          ' ' + targ.textContent || targ.innerText + ' ';
      }

      function buildOptionList(options, elementId) {
        var list = $('#' + elementId);

        list.empty();
        for (var i = 0; i < options.length; i++) {
          console.log(options[i]);
          list.append(
            '<option value="' +
              options[i].toLowerCase() +
              '">' +
              options[i] +
              '</option>'
          );
        }
      }

      (function() {
        buildOptionList(mycannedObj, 'optionList');
      })();
    </script>
  </body>
</html>

编辑：

将代码更改为：

google.script.run.withSuccessHandler（google.script.host.close）.processRowPopupHTML（formObject）;

然后单击按钮，我再次打开一个新标签：

https://n-g6b................tas763ea-0lu-script.googleusercontent.com/userCodeAppPanel?optionList=hi&message=+hi

控制台显示：

我确实看到了：

[19-02-25 17:05:06:900 PST] {optionList=hi, message= hi}

按预期在日志中，这样很好。但是，如何阻止标签页打开？

Answer 1

由于从withSuccessHandler到google.script.host.close传递了其他未指定的参数，可能会收到“不安全导航”警告。提供成功处理程序时，如果它们不是您自己的函数（即，您确切知道它们采用和使用了哪些参数），则最好在匿名函数中访问它们：

...
google.script.run
  .withSuccessHandler(() => google.script.host.close())
  .withFailureHandler(unhandledServersideException => console.log(unhandledServersideException))
  .foo();
...

如果您不想在HTML文件中使用箭头语法，则应为

withSuccessHandler(function () { google.script.host.close(); })

通过这种方式，您可以确保无论foo的输出是什么，都不会传递给google.script.host.close

Answer 2

问题：

forms不是有效的CSS选择器或节点名称。因此，preventDefault()永远不会附加到form上的load提交事件中。

解决方案：

替换

document.querySelectorAll('forms');

使用

document.querySelectorAll('form');

使用应用脚本提交表单

2 个答案:

问题：

解决方案：

参考文献：