通过JS在新标签页中有条件地打开网址

Question

我有一个类似调查的Web应用程序，其中用户选择了许多复选框，然后按“提交”按钮状的链接

<!-- page: /survey -->
<form id="survey" method="post" action="/complete">
    <!-- checkboxes, etc here -->
    <a id="submit" class="button" href="#">Submit</a>
</form>
<script>
    $('#submit').on('click', function (e) {
        e.preventDefault();
        //... other staff happens here
        $('#survey').submit();
    });
</script>

然后在服务器上处理该表单，并在/complete页面上将结果显示给用户。

我要实现的是在提交表单后有条件地打开一个新选项卡。 提交调查后，将在服务器上确定此条件和选项卡的url。

如果将window.open('...', '_blank')插入初始/survey页面上的click-event handler中，则可以使其无条件工作：

$('#submit').on('click', function (e) {
    e.preventDefault();
    //... other staff happens here
    window.open('http://example.com', '_blank'); // <---- this line
    $('#survey').submit();
});

但是，如果我在/complete页面上使用window.open ，它将失败：而是出现一个弹出警告。 可能是因为它未连接到任何用户启动的事件。

但是，就我而言，有一个用户启动的事件，但它发生在上一页。 有什么办法可以将此事件传递给新页面（显然，新页面位于相同的域名，协议等上）。 可能还有另一种方法？

Answer 1

做您想做的正确方法是更改​​标记：

<form id="survey" method="post" action="/complete">
    <!-- checkboxes, etc here -->
    <button type="submit" id="submit" class="button">Submit</button>
</form>

然后在JavaScript中，监听submit事件。 默认情况下，这将允许本机功能（例如隐式提交（文本字段中的输入键）或单击提交按钮的中键）起作用。

现在这里是一些重要的部分：

• 仅在输入无效时阻止默认行为
• 如果您希望表单在新选项卡中打开，请更改表单的target属性。

$('#survey').on('submit', function (e) {
    if (!checkValidity(...)) {
        e.preventDefault();
        return;
    }

    //other stuff happens

    var newTab = shouldOpenInNewTab(...);
    $(this).attr('target', newTab ? '_blank' : '');
});

这样做将允许浏览器使用其默认行为。 它与跨浏览器兼容，并且可以访问。