Bug Tracker

Modify

Ticket #6105 (closed bug)

Opened 4 years ago

Last modified 2 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 4 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 4 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 4 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 4 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 3 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 3 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 2 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

Please follow the  bug reporting guidlines and use  jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.

View

Add a comment

Modify Ticket

Action
as closed
Author


E-mail address and user name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.