为什么 Internet Explorer 在新窗口中而不是在动态插入的 iframe 中打开表单提交？答案

【问题标题】：Why does Internet Explorer open form submission in a new window and not in a dynamically inserted iframe?为什么 Internet Explorer 在新窗口中而不是在动态插入的 iframe 中打开表单提交？
【发布时间】：2010-10-26 21:57:03
【问题描述】：

我正在尝试将表单发布到隐藏的、动态插入的 iframe，但在 Internet Explorer 中，表单提交会在新窗口中打开。

var iframe = document.createElement('iframe');
iframe.name = 'hidden_iframe';
iframe.className = 'NotVisible';
iframe.id = 'hidden_iframe';
document.body.appendChild(iframe);

var my_form = document.getElementById('my_form');
my_form.target = 'hidden_iframe';

这适用于 Firefox，但不适用于 Internet Explorer。

【问题讨论】：

标签： javascript internet-explorer dom iframe

【解决方案1】：

显然您需要在调用 createElement 时包含名称。这适用于 IE，并在符合标准的浏览器中导致异常。我们得到：

var iframe;
try {
    iframe = document.createElement('<iframe name="hidden_iframe">');
} catch (ex) {
    iframe = document.createElement('iframe');
    iframe.name='hidden_iframe';
}

iframe.className = 'NotVisible';
iframe.id = 'hidden_iframe';
document.body.appendChild(iframe);

var my_form = document.getElementById('my_form');
my_form.target = 'hidden_iframe';

【讨论】：

+1 用于在 IE 中发现如此糟糕的东西。哪个版本的IE？ 6？ 7? 8 个？
伟大的修复，从来没有想过它。应该为 IE 做我能想到的最不直观的事情。
难以置信...我刚刚在 Firefox 3.6 上遇到了这个问题。感谢您的回答:)
在 chrome 21.0.1180.79 中不起作用。 IFrame 仍会在新标签页中打开。
我们将整个 iframe 包裹在一个 div 中，并在 innerHTML 中定义了 iframe，似乎在 Chrome 中修复了它。

【解决方案2】：

使用Ajax 提交不是更容易完成吗？您介绍的 iframe 方法非常老套，容易出现很多问题。

这里有一个jQuery Form plugin，它通过为您处理表单值的所有序列化来轻松进行 Ajax 提交。

【讨论】：

我需要获取生成的 HTML 文档的一部分。此外，我认为您的 JQuery Form 插件不适用于文件上传（这是使用所提出技术的主要论据）。
jQuery Forms 适用于文件上传，因为只要表单中有文件输入，它就会在后台使用 IFRAME。
有趣。即使是这种情况，JQuery Forms 也可以在多个浏览器上开箱即用。其次，您可以在提交前和提交后指定回调，因此您可以在提交时返回一个 html ajax 响应。
由于我没有使用 jQuery，我仍然需要一个解决方案。我没有使用 jQuery，因为我有一个使用 MochiKit 的现有代码库，并且我不想向页面添加另一个 19k 资源，而且这个特定页面正在使用 Google Maps API，所以我什至没有使用 MochiKit。另外，我认为了解这些框架的幕后情况很重要。
同意，知道这一点很重要，但与此同时，利用其他人的现有工作也很有好处，这样您就不会每次都重新发明轮子。