为啥javascript触发提交表单（方法获取，目标空白）打开弹出窗口而不是新标签？

Posted 2023-02-22

【中文标题】为啥javascript触发提交表单（方法获取，目标空白）打开弹出窗口而不是新标签？

【英文标题】：Why javascript triggered submit form (method get, target blank) opens popup instead new tab?为什么javascript触发提交表单（方法获取，目标空白）打开弹出窗口而不是新标签？

【发布时间】：2014-08-27 17:23:30

【问题描述】：

仅在 chrome 上...

<form action="http://example.com" method="get" target="_blank">
<input type="text" name="somename" value="some val">
<input type="submit">
</form>

从控制台执行这个js，超时函数或其他...

document.forms[0].submit();

如果通过实际点击“提交”按钮触发提交，表单将正常工作，但如果通过javascript触发提交，则会打开弹出窗口。

我需要完全一样的表单（方法获取，目标空白）并且必须通过 javascript 触发提交，因为在提交之前需要完成几个 ajax 请求...

有人知道解决方法吗？

为：邓肯·考恩

$('button').on('click', function()
    // Validation
    // foo
    // bar
    // ...
    // var errors = true;

    window.promises = new Array;

    // do ajax calls and add hidden inputs...  
    window.promises.push($.ajax( /* Call ...*/ ));
    window.promises.push($.ajax( /* Call ...*/ ));
    window.promises.push($.ajax( /* Call ...*/ ));

    // not always the case
    var promis = true;


    // once inputs are placed... submit
    if (promis) 
        $.when.apply($, window.promises).done(function() 
            // Do submit
            $('form').trigger('submit');
        );
    

    // errors or promises cancel submit
    if ( errors || promis ) 
        return false;
    
);

【问题讨论】：

这个好像是a duplicate of this question，讨论的很详细。

你能创建 plunker 来重现问题吗？

@AlexP 对不起，这对我没有帮助。但那也行。

@MichałLach 这样做：plnkr.co/edit/M4gzX0wRi9o08LsESsUS?p=preview

【参考方案1】：

为了让浏览器不将其归类为弹出窗口，您需要使用受信任的事件（即用户点击某物等）触发表单提交。如果您需要在提交之前但在可信事件之后运行 ajax，您应该在同步模式下运行它 (async: false)。

比如用户点击某处，同步ajax请求，然后提交表单。

如果您使用某种非用户启动的事件触发新窗口打开，浏览器会认为它是一个弹出窗口并经常阻止它。

好的，不用通过promise运行AJAX，直接在click函数中运行即可。但是，将 'async' 设置为 'false' 以便代码停止并等待 ajax 完成。

$('button').on('click', function()
    // Validation
    // foo
    // bar
    // ...
    // var errors = true;

    // do ajax calls and add hidden inputs...  
    $.ajax(asyc: false, /* Call ...*/ );
    $.ajax(asyc: false, /* Call ...*/ );
    $.ajax(asyc: false, /* Call ...*/ );

    $('form').trigger('submit');

);

【讨论】：

问题是我需要通过 ajax 检索的数据作为表单的一部分......所以我使用 Promises :(

具体来说，您使用 AJAX 的目的是什么？以及AJAX代码是如何触发的（用户是否发起？）

我编辑了我的问题，也许这有帮助？谢谢你帮助我:-)

AJAX 调用是否通过隐藏字段向表单添加数据？