Question

应用程序脚本中的HTML服务相当新，编写了一个非常基本的用户界面。

问题在于，当单击按钮时（没有设置onclick处理程序），它会打开一个新的空白选项卡（我使用Chrome浏览器）。

下面的代码重现了行为，我有更广泛的项目中使用的jquery / jquery UI引用，所以留在这里。

如何在点击按钮时停止此空白标签页？此处未显示，但在文本框中输入时也会出现。

code.js：

    function NewProposal() {  
  var html = HtmlService.createTemplateFromFile('Index');

  var ss = SpreadsheetApp.getActiveSpreadsheet();
  ss.show(html.evaluate().setHeight(530).setWidth(1100).setSandboxMode(HtmlService.SandboxMode.IFRAME));
}

的index.html：

<!DOCTYPE html>

<base target="_top">

    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/cupertino/jquery-ui.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.4.1/jsgrid.min.js"></script>


<form>
        <table>
            <tr>
                <td>
                    <button id="Create">Create</button>
                </td>                
            </tr>
       </table>  
</form>

Answer 1

您需要删除按钮，使用其他内容，或删除表单标记，并使用div标记。如果你摆脱了表单标签，那么从表单中的任何输入标签收集数据就更加困难了。但是，我没有在您的表单中看到任何输入标记。如果表单中没有输入标记，那么使用表单标记是没有意义的。也许你只是为了在尽可能少的代码中重现错误而把它们留下来。

在表单标记内单击按钮时，默认行为是当前窗口发出POST请求。这会刷新浏览器中的内容，但如果没有回调来显示其他内容，页面将变为空白。

避免带有按钮的表单内置功能的唯一方法是不使用按钮，或者不使用表单标签。

可以将click事件添加到多个不同类型的HTML元素中。就像链接<a>标签一样。或<div>。因此，您可以使用除按钮之外的其他内容，如果您愿意，可以将其设置为按钮，并将click事件添加到您决定使用的任何内容中。

如果您有许多不同类型的输入标记，则最好继续使用该表单。但是，如果您可以通过其他方式轻松地从表中获取所有数据，那么您并不真正需要该表单。表单不会增加样式或布局的能力。因此，如果使用表单的好处不适合您的情况，那么您可以查看其他选项。

如果您想向用户提供有关所需输入的反馈，那就是另一个问题。表单标签，必需属性和按钮提交都是系统的一部分，可以使表单提交更加自动化，并使数据验证和数据收集更容易。但是，为了使用“内置”功能，它们都需要以某种方式协同工作。与人们试图制作通用的任何东西一样，要使它适合所有情况是非常困难的。如果您不希望在单击按钮时页面变为空白，则所有内置行为都会比帮助更有害。

当Apps脚本获取表单时，它会从表单元素中删除大部分内容，并创建输入名称及其值的对象。因此，当“表单”对象（不再是真正的表单对象）到达服务器时，从对象中获取值的唯一方法是使用名称属性。

Answer 2

在表单打开标记中添加 onsubmit =“return（false）” ：

<form onsubmit="return(false)">
  ...
</form>

谷歌应用程序脚本HTMLService按钮单击打开新的空白选项卡

2 个答案: