DumpsterDoggy

Bookmark This

My Plea for JavaScript to Use the NoScript Tag

Chris Missal, December 05, 2008

I've been working with some jQuery to add nice dynamic content to an existing (older) web application. My goal is to make this as unobtrusive as possible and progressively enhanced. This example isn't the exact code that I wrote for this, but it should give you the idea.

 1 <div id="dynamicContent">
 2     <noscript>
 3         <h3>Progressively Enhanced Content</h3>
 4         <p>This is content that I want to show for 
 5         non-JavaScript browsers... However, I also 
 6         want to use it for some dynamic jQuery-y stuff.</p>
 7         <ul>
 8         <li>Item One</li>
 9         <li>Something Two</li>
10         <li>Tres is three in Spanish</li>
11         </ul>
12     </noscript>
13 </div>

You'll notice the <noscript> tag. I had this great idea to generate a link (like the one below) that will send the user to the content, even if they don't have JavaScript.

    <a href="#bottom">Click to add Details</a>

If they do, however, I'm going to hijack the click of the hyperlink and show the content of the noscript tag, grab the "innards" with jQuery and plop it into a dialog box to display over the screen (see jQuery UI Dialog).

I wrote up some code and this worked great! Exactly like I wanted it to. I turned off JavaScript in my Firefox Web Developer Add-on and it still worked as I wanted with JavaScript disabled.

My next step, check it out in Internet Explorer 7. Nothing, it didn't work (Google Chrome screwed the pooch too). I found out that IE7 does not add the contents of a <noscript> tag to the DOM. Firefox did, it didn't render it, but I could still access it for later if need be.

I tested this in using jQuery's QUnit, the results for Firefox:

I ran the exact same test using Internet Explorer 7:

To end my long, sad, sob story, I just needed to refactor some html to get this working the way I wanted it, but I feel that Firefox is in the right here. Both of these browsers follow the recomendation by the W3C that states: User agents that do not support client-side scripts must render this element's contents. There's no reason the script shouldn't know about it. I think this helps increase the ability to product progressively enhanced dynamic web applications without relying on CSS to do the magic tricks for you.

Filed Under: Discussion   JavaScript   jQuery