Search jQuery

jQuery Forum

Developing jQuery Core

charlesmc..

html() stripping <style> in IE sometimes

Solved

Need more info
Not a problem
Temporary fix
Analyzing
Working on it
Solved

in Developing jQuery Core • 10 years ago

In the following test case, a textarea contains an html snippet/template that we'll try to insert into a div directly above the textarea.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
   alert($("#template").val());
   $("#test").html($("#template").val());
   alert($("#test").html())
});
</script>

<div id="test"></div>
<fieldset>
<textarea id="template">
<style type="text/css">
   .test { color: red; }
</style>
<div id="nav_controls" class="navControls">
   <div id="test_div" class="test">A test</div>
</div>

</textarea>
</fieldset>
</body>
</html>

In IE 8 (haven't tested other version of IE - works fine in FF3.6), the style will be stripped in line #4058 of 1.4.1, which is where it passes the snippet into innerHTML.

IF you put a single linebreak into the textarea before the open style tag, it works without a problem. So you can see it's a bit delicate to reproduce, but we're definitely seeing it in the alpha release code of our jquery app which I'm trying to upgrade to 1.4.1. Bug does not appear in 1.3.x. I suggest strengthening the if statement on line 4047 to 4049 to try to trap this condition, but I don't have any suggestions as to how to do so. Here's the if statement in question:

        } else if ( typeof value === "string" && !/<script/i.test( value ) &&
           (jQuery.support.leadingWhitespace || !rleadingWhitespace.test( value )) &&
           !wrapMap[ (rtagName.exec( value ) || ["", ""])[1].toLowerCase() ] ) {

trac issue: http://dev.jquery.com/ticket/5977

Cheers,

Charles

Replies(3)

charlesmc..

Re: html() stripping <style> in IE sometimes

10 years ago

replying to myself...

here's another testcase: http://www.webdeveloper.com/forum/showthread.php?t=136331

From additional testing, the IE bug does not present itself when there is whitespace preceeding the first element, or a <br/> or an <hr/>... I haven't tried any other tags. But there's more weirdness... if you start the string with a div or span say: "<div> <style>...</style></div>" but leave whitespace before they style tag, the style will still get stripped out. However, if you do the same but preceed the <div> with whitespace the <style> will not be removed.

Finally, some of the time a second style would also be removed, but it was even more capricious about when it would or would not remove it... if you adjust the textarea to be this:

<textarea id="template"><style type="text/css">
   .red_test { color: red; }
</style>
<div id="nav_controls" class="navControls">
<style type="text/css">
   .blue_test { background-color: blue; }
</style>
   <div id="test_div" class="red_test blue_test">A test</div>
</div>
</textarea>

both styles will be stripped, however if you do this:

<textarea id="template"><style type="text/css">
   .red_test { color: red; }
</style>
<div id="nav_controls" class="navControls">
   <div id="test_div" class="red_test blue_test">A test</div>
</div>
<style type="text/css">
   .blue_test { background-color: blue; }
</style>
</textarea>

The second style will survive.

var style_test = document.createElement("div");
style_test.innerHTML = "<style></style>";
alert(style_test.innerHTML.length !== 0);

in the support code should successfully test for this condition. IE8 alerts a false and opera,chrome,ff,safari all alert true.

So, I guess you could write a case that says, value contains a style tag, and does not have leading spaces OR doesn't strip style, then proceed with innerHTML, otherwise use append().

I have to admit though, that even after looking at this for a couple of hours, I don't really fully understand whats and wherefores of this bug.