Question

我有一个类似调查的网络应用程序，用户可以选择多个复选框，然后按“提交”按钮式链接

<!-- 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();
});

如果我在window.open页面上使用/complete，则会失败：会出现一个弹出式警告。可能是因为它没有连接到任何用户发起的事件。

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

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' : '');
});

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

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

1 个答案: