Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at CFinNC 2009 (Raleigh, North Carolina) with: Simon Free and Todd Sharp and Shannon Hicks and Charlie Arehart and Sean Corfield

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

By Ben Nadel on

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>
  •  
  • <!-- This is where the contents of script will be output. -->
  • <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)

 
 
 
 
 
 
Accessing Script Tag Content With jQuery In IE6, IE7, and IE8. 
 
 
 

Non-IE Browsers (FireFox, Safari, Chrome)

 
 
 
 
 
 
Accessing Script-Tag Content With jQuery And FireFox. 
 
 
 

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.



Reader Comments

Thanks for the informative post!
I'm looking into using mustache.js to do client side templated html using the script tag to hold the templates, and I would like to keep the templates in a separate HTML file and load that in the script tag through the src attribute, but that does not seem to work. I'm getting to think this is not possible; have you tried to embed HTML templates from a separate file using the script tag, or have other suggestions to achieve this?

Reply to this Comment

Thanks for your tests. I was really wondering why I couldn´t get my script-content with .text() in IE. Now with .html() it´s working fine in all tested browsers.

Reply to this Comment

Is it possible to access the json content in the case of a remote src url, as in <script id="data" type="application/x-json" src="<some feed url>">? I can't quite get such a thing to work and was hoping to find a way around xss restrictions...

Reply to this Comment

@Jan I don't believe you can access a feed that isn't in the same domain as the page you're on via jQuery.get(). I ended up using JSONP with yahoo pipes, using document.write("<script ....>") and then as a url parameter I indicate the javascript function to pass the data to once the script loads the data. Handy way to get around XSS issues since there's no equivalent of Flash's crossdomain.xml (or is there?)

Reply to this Comment

This is still an issue 2 years later. jQuery is supposed to remediate these cross browser issues, no? I have been unable to find any statement from the jQuery team calling this behavior "by design" or anything else. I wonder what they have to say about it.

Reply to this Comment

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.