Script Tags, jQuery, And Html(), Text() And Contents()

The other day, Matt Olson left a comment on my jQuery and ColdFusion rating system post that the jQuery script I had was not working in Internet Explorer (IE). I confirmed this on my local copy and eventually narrowed it down to a discrepancy in the way IE can access the contents of a non-Javascript Script tag. Originally, I had been using the text() method to extract the Script contents, which worked fine in FireFox. In IE, however, I had to switch over to the html() method.
After this discovery, I figured I would run the various jQuery script-content-access methods in IE and FireFox to see what else I might discover. Here is the test code that I ran:

<!DOCTYPE HTML>
<html>
<head>
<title>jQuery: Scripts Tags And Text(), HTML(), and Contents()</title>
<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript">
// When the DOM is ready, init scripts.
jQuery(function( $ ){
// Get a reference to our Script tag.
var script = $( "#data" );
// Get a reference to our output tags.
var textOutput = $( "#text-output" );
var htmlOutput = $( "#html-output" );
var contentsTextOutput = $( "#contents-text-output" );
var contentsHtmlOutput = $( "#contents-html-output" );
// Use the various approachs to output the contents
// of the Script tag to the document.
// Text.
textOutput.text( script.text() );
// Html.
htmlOutput.text( script.html() );
// Contents - Text.
contentsTextOutput.text( script.contents().text() );
// Contents - Html.
contentsHtmlOutput.text( script.contents().html() );
});
</script>
</head>
<body>
<h1>
jQuery: Scripts Tags And Text(), HTML(), and Contents()
</h1>
<script id="data" type="application/x-json">
{script-content}
</script>
<p>
TEXT: <span id="text-output"> ... </span>
</p>
<p>
HTML: <span id="html-output"> ... </span>
</p>
<p>
CONTENTS (TEXT): <span id="contents-text-output"> ... </span>
</p>
<p>
CONTENTS (HTML): <span id="contents-html-output"> ... </span>
</p>
</body>
</html>

As you can see, I have a Script tag with some non-Javascript content. Then, I use the various methods - text(), html() and contents() - to try an access that content and output it to the screen. I tested this on IE6, IE7, IE8, FireFox, Safari, and Chrome. The non-IE browsers were all the same. The IE browsers were all the same which one minor exception: IE6 and IE7 added additional white space that IE8 did not.

IE Browsers (IE6, IE7, ~IE8)

Non-IE Browsers (FireFox, Safari, Chrome)

As you can see, IE was only able to access the Script tag contents using the html() method. All non-IE browsers, on the other hand, were able to use text(), html(), and contents(). None of the browsers, however, were able to access the content using contents().html(). This is not a limitation of the browser or jQuery, but rather a byproduct of the fact that there are no non-text DOM nodes contained within the Script tag.
I cannot figure out why there is extra white space in the IE-based output when it grabs the content via html(). It's as if it is rendering the content using a PRE tag or something (minus the line breaks). That must just be a bug - one that has been fixed in IE8.
All in all, it looks like the html() method is the only cross-browser safe way to access the contents of a Script tag. That's good to know, especially since Script tags act as a very convenient container for HTML templates.

GhoWokz™

info

Senin, 21 Maret 2011