IE中由jQuery设置的iframe`name`属性的奇怪行为 [英] Weird behaviour of iframe `name` attribute set by jQuery in IE
问题描述
我正在做一个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创建代码更改为稍微难点来解决问题：
.appendTo（body）;
进行这项更改可以根据需要将表单张贴到iframe中。
我的问题是：
.attr（name，...）按预期工作？
submitName 属性来自&它的目的是什么？
不是！！）
很难相信，我知道，但我们在那里。
历史上（*），设置名称属性在IE中有许多问题。它往往只能部分保持。例如，在表单字段名称上，它不会像它应该那样影响 form.elements [name] lookup。这似乎是设置名称属性不可靠的另一种情况。
虽然jQuery试图解决浏览器错误像这样，它并没有抓住所有的东西，也没有已知的方式来完全解决它。
（*：在IE中最多7个。本地documentMode通过使用标准模式doctype，如果需要的话，一个X-UA兼容的头/元，这两个错误不会出现。）
<$ c出现在开发工具中的$ c> submitName 是一个有趣的IE浏览器后台画面，因为它根本不出现在公共可见的DOM中。如果您查看< input> 元素或< form> ，它会执行相同的操作，其中 name 属性也是在创建后编写的。
所以，似乎发生的事情是IE-up-7将名为 name 的所有属性重定向到一个内部名为 submitName 的不可见属性，该字段将作为表单提交的一部分生成的数据，但不会更改用于HTMLCollection索引，radio-grouping，getElementsByName或用于HTMLControlByName的实际名称属性。以[i]框架为例，定位。
I'm doing an ajax style file upload by posting the file in a form to an iframe and noticed some weird behaviour in IE (seems to happen in both 6 & 8). Basically in IE the form doesn't target the iframe properly so the response appears in a new window (instead of in the iframe). You can reproduce the problem with the following minimal set of 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>
Now (before you post an answer), I did some investigation (using IE8's developer tools) and it appears that the .attr("name", frameName) is actually adding the attribute as submitName="myFrame" instead of simply name="myFrame". Based on this, I solved the issue by changing the iframe creation code to the slightly nastier:
var $iframe = $("<iframe src=\"about:blank\" name=\"" + frameName + "\" />")
.appendTo("body");
Making this change makes the form post into the iframe as desired.
My questions are:
- Why doesn't
.attr("name", ...)work as expected? - Is it a bug in jQuery, a bug in IE (surely not!?!), or am I missing something obvious?
- Where does the
submitNameattribute come from & what's its purpose?
a bug in IE (surely not!?!)
Hard to believe, I know, but there we are.
Historically(*), setting the name attribute has many problems in IE. It tends to only partially hold. For example on form field names, it doesn't affect the form.elements[name] lookup like it should. This appears to be another case where setting the name property is unreliable.
Whilst jQuery attempts to work around browser bugs like this, it doesn't catch everything, and there is no known way to solve it fully.
(*: in IE up to 7. If you run IE8 in native documentMode by using a standards mode doctype and if necessary an X-UA-Compatible header/meta, both these errors don't crop up.)
The submitName appearing in the dev tools is an interesting glimpse behind the scenes of an IE bug, since it doesn't appear in the publically-visible DOM at all. It does the same thing if you look at an <input> element or <form> whose name attribute has been written after creation, too.
So what appears to be happening is that IE-up-to-7 redirects all use of attributes called name to an otherwise-invisible property, internally called submitName, that for form fields changes the data the field will generate as part of a form submission, but which doesn't change the real name attribute used for HTMLCollection indexing, radio-grouping, getElementsByName, or, in the case of [i]frames, targeting.
这篇关于IE中由jQuery设置的iframe`name`属性的奇怪行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
