Bug Tracker

Ticket #6105 (closed bug)

Opened 5 years ago

Last modified 3 years ago

$('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:
Blocking: Blocked by:

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

comment:1 Changed 5 years ago by av01d

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">

$('head').append('<link rel="stylesheet" href="style.css" type="text/css" />');

</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).

comment:2 Changed 5 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 5 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 5 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 4 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 4 years ago by SlexAxton

  • Owner set to av01d
  • Priority set to low
  • Status changed from new to pending
  • Milestone changed from 1.4.2 to 1.5

Can you confirm this bug in 1.4.3 in a jsFiddle testcase? thanks!

comment:7 Changed 4 years ago by trac-o-bot

  • Status changed from pending to closed

Automatically closed due to 14 days of inactivity.

comment:8 Changed 3 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 3 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

Note: See TracTickets for help on using tickets.