从弹出窗口提交表单到新选项卡，然后关闭弹出窗口，防止表单提交

Question

我完全无法确定这个问题，因为其他人在Chrome中报告成功，但我在[=43]中重现了这个问题=] 44 而不是在 Firefox 33.1 中。打开隐身模式（即没有扩展），并在弹出窗口阻止程序设置中进行豁免没有任何效果。

我有一个带有表单的弹出窗口 window，表单的目标是 _blank。目的是表单提交将转到父 window 中的新选项卡。然后弹出窗口自行关闭。

但是，除非我删除使弹出窗口自行关闭的代码，否则新选项卡不会打开。

我想我在某处触发了弹出窗口预防（特别是因为我无法通过本地 file:/// URL 进行复制；只能使用远程内容），但我无法找出为什么在提交后关闭弹出窗口 window 会破坏提交本身。我在开发者控制台中看不到任何相关内容。

我也试过，不是onsubmit，而是添加到提交按钮onclick="setTimeout('window.close()',1);return true;"，效果一样；事实上，这是在我尝试调试的应用程序中实际发现的糟糕代码。

怎么回事？

这是一个重现问题的糟糕的独立测试用例。

var trigger = null;
var popup   = null;

window.onload = function() {
  trigger = document.getElementById('trigger');
  trigger.onclick = function() {
    popup = window.open('', 'thePopup', 'width=450,height=450');
    if (popup == null) {
      console.error("Failed to open popup window :(");
    }
    else {
      populatePopup();
    }
  };
};

function populatePopup() {
  popup.document.write('<html><body>');
  popup.document.write('<form method="GET" action="http://google.com/?q=test" target="_blank" onsubmit="window.close()">');
  popup.document.write('<input type="submit" value="Click here now" />');
  popup.document.write('</form>');
  popup.document.write('</body></html>');
}

<a href="#" id="trigger">Click here</a>

（遗憾的是，由于弹出因素，此代码段根本不会运行，至少在我的浏览器中不会。但是，框架内容可能是 copy/pasted逐字记录到待测试的文件中。）

Answer 1

如果您不能使用 ajax 调用，您可以尝试这种形式的目标拼凑：基本上，您将表单的目标设置为包含在弹出窗口中的 iframe。这将使您的表单提交结果，即您正在抓取的 google 页面，显示在 iframe 中。然后，您可以在表单的 onsubmit 事件上为该 iframe 的加载事件添加一个事件监听器。

<form method="GET" action="http://google.com/?q=test" target="after" onsubmit="close()">
<input type="submit" value="Click here now" />
</form>
<iframe id="after" name="after"></iframe>
<script>
function close() {
    document.querySelector('#after').addEventListener('load', function() {
        window.close();
    });
}
</script>

从弹出窗口提交表单到新选项卡，然后关闭弹出窗口，防止表单提交

Submitting form from popup to new tab, then closing the popup, prevents form submission

html

javascript

forms

popup