#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 7 years ago by av01d
comment:2 Changed 7 years ago by av01d
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:3 Changed 7 years ago by rssaddict
I can confirm this is broken in 1.4.x and worked in 1.3.2
comment:4 follow-up: ↓ 5 Changed 7 years ago by av01d
Just tested this with 1.4.2, both issues have been resolved. Thank you very much!
comment:5 in reply to: ↑ 4 Changed 6 years ago by dubunin
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 6 years ago by SlexAxton
- Milestone changed from 1.4.2 to 1.5
- Owner set to av01d
- Priority set to low
- Status changed from new to pending
Can you confirm this bug in 1.4.3 in a jsFiddle testcase? thanks!
comment:7 Changed 6 years ago by trac-o-bot
- Status changed from pending to closed
Automatically closed due to 14 days of inactivity.
comment:8 Changed 5 years ago by anonymous
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 5 years ago by madhavan_t_p@…
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).