如何将表单提交到新窗口？

Question

我想使用 JavaScript 动态插入一个表单，然后提交它并在新窗口中打开目标。

这是我的代码：

            var form = document.createElement("form");
            form.setAttribute("method", "post");
            form.setAttribute("action", xxx);
            form.setAttribute("onsubmit", "window.open('about:blank','Popup_Window','scrollbars=yes,width=550,height=520');");
            form.setAttribute("target", "Popup_Window");

            document.body.appendChild(form);
            form.submit();

此代码有效——它动态插入表单并成功提交表单。但是，表单是在新选项卡中打开的，而我希望它在新窗口中打开。知道怎么了？对于如何解决这个问题，有任何的建议吗？我也对 jQuery 持开放态度。

谢谢！

编辑：我不确定为什么人们将其标记为重复。是的，它与另一个问题的主题相同，但答案不相关 - 声称的重复问题有一个新行，它弄乱了代码，我没有，但我的代码仍然无法工作......

Answer 1

我已将此标记为重复，因为我认为您的问题是关于如何将表单发送到弹出窗口。以下是不使用onsubmit 事件的方法：

var form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", xxx);

function submitToPopup(f) {
    var w = window.open('', 'form-target', 'width=600, height=400, any-other-option, ...');
    f.target = 'form-target';
    f.submit();
};

document.body.appendChild(form);

submitToPopup(form);

因此，不是使用onsubmit 事件从那里创建弹出窗口，而是在发送表单之前先创建它，然后将表单发送给它。

Answer 2

You could do this instead [link],

1. 打开一个新窗口
2. 在其中插入表格
3. 提交

4. 将导航到 url

   var form = document.createElement("form");
   
   form.setAttribute("method", "post");
   form.setAttribute("action", "http://www.yahoo.com");
   
   
   function popitup() {
       newwindow = window.open('', 'name', 'width=800,height=600');
       if (window.focus) {
           newwindow.focus()
       }
       newwindow.document.body.appendChild(form);
       newwindow.document.forms[0].submit();
       return false;
   }
   
   popitup();
   

Answer 3

据我所知，大多数浏览器和广告拦截器都会阻止此类脚本打开新窗口，因为它是自动运行的。但是，如果您像这样实现它，用户必须单击链接：JSFiddle 它更有可能在新窗口中打开。

使用 jQuery：

$('.open-popup').click(function(e) {
    e.preventDefault();
    var form = document.createElement("form");
    form.setAttribute("method", "post");
    form.setAttribute("action", "");
    document.body.appendChild(form);
    form.submit();
    window.open(this.href, '_blank', 'width=300,height=200');
});

HTML：

<a href="about:blank" class="open-popup">Click Me</a>

此外，某些浏览器的首选项会自动禁用在新窗口中打开。因此，您可能想探索替代方案，或者只是要求用户在新选项卡中打开链接。

Answer 4

如果您想始终保持弹出窗口“集中”，您可以使用最初发现的技巧here。通过快速打开/关闭/打开它，我们确保它始终表现得像新窗口并抓住焦点。

 <form name=f1 method=post action=test.html>

  <input type=text name=name value='123'>

  <input type='submit' value='Submit' 

  onclick="if(window.open('','reuse_win') != null) {
       window.open('','reuse_win').close();
    }; this.form.target='reuse_win'; return true;">

</form>

也适用于链接。

<a href="http://stackoverflow.com" onclick="
if(window.open('','reuse_win') != null) {
   window.open('','reuse_win').close();
}" target="reuse_win">Always opens in the same window and FOCUS</a>

Answer 5

出于安全原因，我需要类似的东西。我必须阻止 GET 方法，只允许 POST 方法，以便在弹出窗口中显示 PDF 我使用以下代码：

• url：是要显示的url。

• mywindow：窗口的名称。

• 参数：'width=300,height=200' 尺寸

    var windowopen = function(url,mywindow,parameter) {
    var form = document.createElement('form');
    form.setAttribute("method",'POST');
    form.setAttribute("action",url);
    form.autofocus=true;
    function popupw(f){ 
        var mypopup = window.open('',mywindow,parameter);
        f.setAttribute("target", mywindow);
        document.body.appendChild(f);
        f.submit();
    }
    popupw(form);
  

  };

Answer 6

如果您的意思是新标签。通过将目标属性添加到表单并删除弹出目标部分来编辑您的代码。

var form = document.createElement("form");
form.setAttribute("target", "_blank");
form.setAttribute("method", "post");
form.setAttribute("action", xxx);
document.body.appendChild(form);
form.submit();