jQuery 在 IE 中设置的 iframe `name` 属性的奇怪行为答案

【问题标题】：Weird behaviour of iframe `name` attribute set by jQuery in IEjQuery 在 IE 中设置的 iframe `name` 属性的奇怪行为
【发布时间】：2010-01-20 23:20:49
【问题描述】：

我正在上传 ajax 样式文件，方法是将文件以表单形式发布到 iframe，并注意到 IE 中的一些奇怪行为（似乎在 6 和 8 中都发生了）。基本上在 IE 中，表单不能正确地target iframe，因此响应出现在新窗口中（而不是在 iframe 中）。您可以使用以下最小的 HTML/JS 集重现该问题：

<html>
<head>
  <script src="http://code.jquery.com/jquery-1.3.2.js"></script>
  <script>
    $(document).ready(function(){
      var frameName = "myFrame";
      var $iframe = $("<iframe src=\"about:blank\" />")
              .attr("name", frameName)
              .appendTo("body");
      var $uploadForm = $("<form action=\"http://www.google.com/search\" />")
              .attr("target", frameName)
              .append("<input type=\"text\" name=\"q\" />")
              .append("<input type=\"submit\" />")
              .appendTo("body");
    });
  </script>
</head>
<body>
</body>
</html>

现在（在您发布答案之前），我进行了一些调查（使用 IE8 的开发人员工具），似乎 .attr("name", frameName) 实际上将属性添加为 submitName="myFrame" 而不是简单的 name="myFrame"。基于此，我通过将 iframe 创建代码更改为稍微糟糕的方式解决了这个问题：

var $iframe = $("<iframe src=\"about:blank\" name=\"" + frameName + "\" />")
        .appendTo("body");

进行此更改会使表单根据需要发布到 iframe 中。

我的问题是：

为什么.attr("name", ...) 没有按预期工作？
这是 jQuery 中的错误，IE 中的错误（肯定不是！？！），还是我遗漏了一些明显的东西？
submitName 属性来自哪里以及它的用途是什么？

【问题讨论】：

标签： jquery internet-explorer forms iframe

【解决方案1】：

IE 中的一个错误（肯定不是！？！）

很难相信，我知道，但确实如此。

从历史上看(*)，在IE中设置name属性有很多问题。它往往只是部分持有。例如，在表单字段名称上，它不会像应有的那样影响 form.elements[name] 查找。这似乎是另一种设置 name 属性不可靠的情况。

虽然 jQuery 尝试解决这样的浏览器错误，但它并不能捕获所有问题，并且没有已知的方法可以完全解决它。

（*：在 IE 中最多为 7。如果您使用标准模式 doctype 并在必要时使用 X-UA 兼容标头/元在本机 documentMode 中运行 IE8，则不会出现这两个错误。）

出现在开发工具中的submitName 是 IE 错误背后的有趣一瞥，因为它根本不会出现在公开可见的 DOM 中。如果您查看 <input> 元素或 <form> 其 name 属性也在创建后写入，它会执行相同的操作。

所以看起来正在发生的事情是 IE-up-to-7 将所有使用称为 name 的属性重定向到一个否则不可见的属性，内部称为 submitName，对于表单字段，该字段将更改数据作为表单提交的一部分生成，但不会更改用于 HTMLCollection 索引、单选分组、getElementsByName 或在 [i] 帧的情况下定位的真正 name 属性。

【讨论】：

感谢背景，我认为这是我将得到的最明确的答案，没有任何前 IE 开发人员发布（尽管我无法想象他们承认这一事实：P )，所以我接受它。很高兴知道，如果您有正确的文档类型，至少该错误在 IE8 中确实消失了。
getElementsByName，radio-grouping 等似乎在工作，即使 name 属性保持不变并且只有 submitName“属性”发生了变化——你遇到过任何问题吗？你提到的那些事？我在ie8的ie7兼容模式下测试过这个，好像一切正常。
更多信息：thunderguy.com/semicolon/2005/05/23/…
为了增加混乱，在 IE 中 getElementById('foo') 还获取具有 name="bar "submitName="foo" 的元素 sigh X-(跨度>

【解决方案2】：

像这样创建元素

$("<iframe name='frameName' />")

帮我解决了问题

【讨论】：

【解决方案3】：

这不仅仅是jQuery的问题，手动设置时也会发生。

如果使用 setAttribute() 方法来设置它，即使没有 jQuery，它也会在刚刚创建表单或 iframe 时执行相同的操作！同样，使用 innerHTML 你可以修复它......是的，再一次，它是微软破坏了我的一天：/

【讨论】：

【解决方案4】：

你见过 jQuery 1.4 中的markup creation improvements 吗？

如果你觉得这很讨厌，试试这个：

$('<iframe />',
{
   name: frameName,
   src: 'about:blank'
}).appendTo("body");

【讨论】：

没有区别：从新的 {attrs} 对象设置 name 失败的方式与使用 attr() 设置它的方式相同。
遗憾的是，标记改进仍然值得展示。 +1 弹跳
是的，我已经看到了新语法（这个项目坚持使用 1.3.2），但这实际上并没有回答我的问题......无论如何使用新语法和 1.4 仍然存在问题（我相信您写的内容实际上等同于我原来的.attr("name", frameName))。
同意，这是为了响应您的“通过将 iframe 创建代码更改为更糟糕的方式解决了问题”。