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

我还没有完全能够把这个固定下来，因为其他人都在报道Chrome的成功，但我在Chrome 44中再现了这个问题，而不是在Firefox 33.1中。打开隐身模式(即没有扩展)，并在弹出窗口拦截器设置中进行豁免是没有效果的。

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

然而，新的选项卡不会打开，除非我删除代码，使弹出窗口关闭自己。

我想我触发弹出预防某处(特别是因为我不能通过本地file:/// URL复制;只有远程内容)，但我还没能弄清楚为什么在提交后关闭弹出窗口会破坏提交本身。我在开发者控制台看不到任何相关的东西。

我也试过，而不是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>

(遗憾的是，由于弹出因素，这个片段根本无法运行，至少在我的浏览器中无法运行。但是，可以将框架内容逐字复制/粘贴到要测试的文件中。

如果你不能使用ajax调用，你可以尝试这个表单目标kludge:基本上，您将表单的目标设置为包含在弹出框中的iframe。这将使表单提交的结果，即您正在抓取的google页面，显示在iframe中。然后，您可以在表单的onsubmit事件上为该iframe的load事件添加一个事件侦听器。

<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>

相关内容

最新更新

热门标签：