javascript - 通过js有条件地在新选项卡中打开url

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 上的点击事件处理程序，我可以使其无条件工作> 页码:

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

但是，如果我在 /complete 页面上使用 window.open ，它就会失败:会出现弹出警告。可能是因为它没有连接到任何用户启动的事件。

但是，就我而言，有一个用户启动的事件，但它发生在上一页上。有什么方法可以将此事件传递到新页面(显然新页面位于相同的域名、协议(protocol)等上)。也许还有其他方法？

Answer 1

做你想做的事情的正确方法是更改​​标记:

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

然后在 JavaScript 中监听 submit 事件。这将允许 native 功能(例如隐式提交(在文本字段中输入 key )或中键单击提交按钮)在默认情况下工作。

现在这里有一些重要的部分:

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

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

    //other stuff happens

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

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