{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 一夜七次 的问题《Weird behaviour of iframe `name` attribute set by》','https://www.manongdao.com/q-98705.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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?
Hard to believe, I know, but there we are.
Historically(*), setting the
nameattribute has many problems in IE. It tends to only partially hold. For example on form field names, it doesn't affect theform.elements[name]lookup like it should. This appears to be another case where setting thenameproperty 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
submitNameappearing 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>whosenameattribute has been written after creation, too.So what appears to be happening is that IE-up-to-7 redirects all use of attributes called
nameto an otherwise-invisible property, internally calledsubmitName, that for form fields changes the data the field will generate as part of a form submission, but which doesn't change the realnameattribute used for HTMLCollection indexing, radio-grouping, getElementsByName, or, in the case of [i]frames, targeting.creating the element like this
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: