Weird behaviour of iframe `name` attribute set by jQuery in IE
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开发者_StackOverflow 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.
creating the element like this
$("<iframe name='frameName' />")
solved the problem for me
It is not just a jQuery problem, when setting manualy, it happens too.
If using the setAttribute() method to set it, even whithout jQuery, it does the same when the form or iframe has just been created! The same way, using the innerHTML you can fix it ... yes, once again, it is the Microsoft destroying my day :/
Have you seen the markup creation improvements in jQuery 1.4?
If you find that nasty, try this:
$('<iframe />',
{
name: frameName,
src: 'about:blank'
}).appendTo("body");
加载中,请稍侯......
精彩评论