Why <noscript> is Useless

When JavaScript was first introduced the <noscript> tag served a purpose. People running the Netscape 2 browser had the JavaScript run while everyone else saw the content of the noscript tag. If JavaScript had remained the same language through to today that it was then we would still be able to use the noscript tag in the way we could back then with browsers that understand JavaScript running the script and browsers that don't understand it displaying the content of the noscript.

JavaScript didn't remain static though. New versions of JavaScript introduced new commands to the language and browsers vary in their implementation of these commands. This means that we can't do a simple test for whether JavaScript is supported or not (which is all the noscript tag can do) as that doesn't cater for browsers that support some JavaScript but which don't support the JavaScript that we are using.

Let's take a look at several examples so that you can see what I mean.

<p id="noscript">Your browser does not support a recent enough version of JavaScript.</p>
<script type="text/javascript">
(function() {
if (!document.getElementById) return;
document.getElementById('noscript').innerHTML = 'Your browser supports JavaScript";
// actual code goes here
}());
</script>

In this first example we have substituted a paragraph for the noscript tag and given it an id of "noscript". Where a regular noscript tag will not display anything in Netscape 2, 3 or 4 or Internet Explorer 3 or 4 because those browsers support JavaScript, this new version requires a version of JavaScript that is at least modern enough to support at least some of the standard DOM commands. Those particular Netscape and IE versions don't support the standard DOM at all and so our script treats them as not supporting JavaScript since our script is going to use valid JavaScript code that those browsers don't support.

We have raised the bar on what JavaScript we expect browsers to support in order to consider that the browser actually supports JavaScript. We now have at least five different browsers we want treated as if they don't support JavaScript but where the noscript tag doesn't work. As this is really the minimum level that should be remotely considered for writing JavaScript for the 21st Century this means that the noscript tag is already useless and we are still only looking at JavaScript commands that have been around almost from the start.

Next example

<p id="noscript">Your browser does not support a recent enough version of JavaScript.</p>
<script type="application/javascript">
(function() {
if (!'visibilityState' in document) return;
document.getElementById('noscript').innerHTML = 'Your browser supports JavaScript";
// actual code goes here
}());
</script>

This is a relatively simple test for the browser supporting reasonably modern JavaScript (the version introduced in 2009 so it isn't all that modern). Now anyone using Chrome 12, Firefox 9, Internet Explorer 9, Opera 11, or Safari 6 or earlier versions of any of those browsers (just to consider the most popular five browsers and ignoring the hundreds of others) is considered to be using a browser that is not modern enough to support the JavaScript we want to use and so gets the 'noscript' version of the message.

While we have only tested for one command being supported in each of these tests and really ought to test for all of the commands we intend to use, these particular tests are reasonably good ones for eliminating all of the browsers that don't support a particular level of JavaScript - at least so far as the major browsers are concerned. We could still have minor browsers break because they don't support a particular command our script relies on while supporting the one we tested for but we can fix those when we find them.

Final Example:

<p id="noscript">Your browser does not support a recent enough version of JavaScript.</p>
<script type="application/javascript">
(function() {
if (!'Reflect' in window) return;
document.getElementById('noscript').innerHTML = 'Your browser supports JavaScript";
// actual code goes here
}());
</script>

Now we have a situation where we are testing for browsers that support all of the new 2015 standard version of JavaScript. As 'Reflect' is the newly introduced built in static object which has the lowest level of browser support at the time of the new version of JavaScript's release this makes a good indicator for whether or not browsers fully support the current version of JavaScript. At the time of writing, the only browser that would be treated as supporting JavaScript by this code would be Microsoft Edge (which at the time of writing is still in development). As such we can say that when we use this code as our noscript test that ALL current browsers do not currently support the required version of JavaScript. Of course if a few years have passed since I wrote this then there will of course be browsers that do support JavaScript with this definition of JavaScript applied.

The point is that there are numerous different levels of JavaScript support in browsers and unless you are going to limit yourself to the JavaScript that Netscape 2 understands then you can't use the noscript tag for determining whether or not a given browser supports a sufficient level of JavaScript for your script to be able to run, your only choice if you don't want browsers that don't support sufficient JavaScript from breaking is to test for the level of JavaScript support that is required and display the 'noscript' message to everyone whose browser has less than sufficient JavaScript support as well as those who have no JavaScript support at all.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate