#6105 closed bug
$('head').append/appendTo('head') broken in MS Explorer
| Reported by: | av01d | Owned by: | av01d |
|---|---|---|---|
| Priority: | low | Milestone: | 1.5 |
| Component: | core | Version: | 1.4.1 |
| Keywords: | head append | Cc: | |
| Blocked by: | Blocking: |
Description
Appending a linked stylesheet to the <head> of a page is broken on IE (tested on IE7 and IE8) in jQuery 1.4.1. Used to be fine in 1.3.2.
Example:
<html> <head> <script type="text/javascript" src="jquery-1.4.1.min.js"></script> </head> <body> <h1>jQuery bug</h1> <script type="text/javascript">
$('head').append('<link rel="stylesheet" href="style.css" type="text/css" />');
</script> </body> </html>
or
<html> <head> <script type="text/javascript" src="jquery-1.4.1.min.js"></script> </head> <body> <h1>jQuery bug</h1> <script type="text/javascript">
$('<link rel="stylesheet" href="style.css" type="text/css" />').appendTo('head');
</script> </body> </html>
In both cases, the appended stylesheet is not applied in IE. Of course, this all works fine when you use decent browsers (like FF and Chrome).
Live testcase here: http://misc.arjan.webpower.nl/jquery/
Change History (9)
comment:1 Changed 8 years ago by
comment:2 Changed 8 years ago by
Now with formatting, for better readability:
<html>
<head>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script> </head>
<body>
<h1>jQuery bug</h1>
<script type="text/javascript">
$('head').append('<link rel="stylesheet" href="style.css" type="text/css" />');
</script>
</body>
</html>
comment:4 follow-up: 5 Changed 8 years ago by
Just tested this with 1.4.2, both issues have been resolved. Thank you very much!
comment:5 Changed 8 years ago by
Replying to av01d:
Just tested this with 1.4.2, both issues have been resolved. Thank you very much!
I still see this issue in 1.4.2 when updating the inner html of an element and that new html contains linked stylesheet(s). Again the stylesheet is not applied in IE7/8. Works fine in ff,safari,chrome.
Example:
$.ajax({
type: 'GET', url: hash, dataType: 'html', cache: false, success: function (data){
/* data = <link rel="stylesheet" type="text/css" href="style.css"/> <div>...blah blah...</div> */
$('#' + t).html(data);
}
});
comment:6 Changed 7 years ago by
| Milestone: | 1.4.2 → 1.5 |
|---|---|
| Owner: | set to av01d |
| Priority: | → low |
| Status: | new → pending |
Can you confirm this bug in 1.4.3 in a jsFiddle testcase? thanks!
comment:7 Changed 7 years ago by
| Status: | pending → closed |
|---|
Automatically closed due to 14 days of inactivity.
comment:8 Changed 7 years ago by
easy fix
if (document.createStyleSheet)
document.createStyleSheet('stylesheet.css');
else
$("head").append('<link href="stylesheet.css" rel="stylesheet" type="text/css" />');
This is only an issue in older IE browsers.
Real developers dont pick THEIR browser preference, they develop for all browsers ;)
comment:9 Changed 6 years ago by
Just good option apply css head tag in jQuery
How can we apply this in to iframe src content?
Advance thanks to you
There's another weird issue here. Consider the same code as above:
<html> <head> <script type="text/javascript" src="jquery-1.4.1.min.js"></script> </head> <body> <h1>jQuery bug</h1>
<script type="text/javascript">
</script> </body> </html>
When this page is hosted on a secure server (https) and visited with Explorer, it issues a "mixed content" popup. As explained above, the stylesheet is *NOT* applied in this case either (no difference in allowing or declining the mixed content).