Valid way to add noscript in head for wrapping redirect

Asked 16/2, 2010 at 3:40 Answered 13/10, 2011 at 9:12

So I was thinking a simple way to deal with javascript being disabled by the browser would be the following:

<head>
        <title>JavaScript Test</title>
        <noscript>
                <meta http-equiv="Refresh"
                        content="1;url=nojs.html" />
        </noscript>
</head>

And having the nojs.html have something like:

<p>Return to <a href="jstest.html">test</a> after enabling javascrpt.</p>

At the crash page.

This isn't my preferred method, but it's nice and simple until something more graceful can be worked out for users without javascript.

However, it is not valid to put a <noscript> element in the head section. The preliminary tests worked anyway, of course, but I'm superstitious when it comes to my code being valid, plus I'd hate for this to actually fail a field test.

So is there a valid way to do this? Perhaps wrapping the noscript in another element, like an object tag? Or some even simpler way I'm not thinking of?

Cordillera answered 16/2, 2010 at 3:40 Comment(1)

HTML5 permits the use of <noscript> in the head section. – Michel 22/9, 2012 at 19:8

I am not sure why you need to redirect to another page instead of just showing a message. I use JS and a little CSS to handle these situations for me. Something like this:

<head>
   ....
   <script type="text/javascript"> document.documentElement.className += " js"</script>

   <link rel="stylesheet" type='text/css' href="css/layout.css" media="all" />
</head>
<body>
    <div id="noscript">Please enable JavaScript, then refresh this page. JavaScript is required on this site</div>
    <div id="wrapper">
       ...
    </div>
</body>

Then in layout.css:

 #wrapper      { display: none  } /* Hide if JS disabled */
 .js #wrapper  { display: block } /* Show if JS enabled */
 .js #noscript { display: none  } /* Hide if JS enabled */

By doing it this way, the class is applied to the html element before the page is rendered so you won't get a flicker as the non-JS content is swapped out for the JS content.

Theroid answered 16/2, 2010 at 3:48 Comment(2)

Why <div id="noscript"> and not <noscript>? You could take that third line out of your CSS. – Listless 24/9, 2010 at 10:46

@mattalexx More to keep it consistent. Also, very few elements are valid to use inside <noscript> tags, so in this example it would be a fine alternative, but in many cases it would not be. – Theroid 24/9, 2010 at 14:31

Doug's solution is pretty good, but it has a few drawbacks:

It is not valid to have a class attribute on the html element. Instead, use the body.
It requires that you know what display type to set the element to (i.e. ".js #wrapper { display: block }").

A simpler, more valid and flexible solution using the same approach could be:

<html>
    <head>
        <!-- put this in a separate stylesheet -->
        <style type="text/css">
            .jsOff .jsOnly{
                display:none;
            }
        </style>
    </head>

    <body class="jsOff">
        <script type="text/javascript">
            document.body.className = document.body.className.replace('jsOff ','');
        </script>

        <noscript><p>Please enable JavaScript and then refresh the page.</p></noscript>

        <p class="jsOnly">I am only shown if JS is enabled</p>
    </body>
</html>

With this, it's valid html (no class attribute on the html element). It is simpler (less CSS). It's flexible. Just add the "jsOnly" class to any element that you want to only display when JS is enabled.

Brickey answered 3/6, 2011 at 10:27 Comment(1)

Great approach without redirect (and subsequent content flash) and supported in HTML4/5. – Sapor 17/3, 2015 at 17:29

The <noscript> tag cannot be in the <head>, it must be in the <body>

The common practice is to show a message instead of redirecting, as there is no way to redirect only if javascript is disabled.

You could do it the other way around, have the first page be nojs.html, and on that page use javascript to redirect to the main content.

Fortuneteller answered 16/2, 2010 at 3:51 Comment(1)

In HTML4.01 this is true, but for HTML5 you can write <noscript> in <head> (using <link>, <style> and <meta> elements only) w3schools.com/tags/tag_noscript.asp – Autoplasty 8/8, 2013 at 12:15

If you truly want a valid way to do it, make your main page the nojs.htm page and use JS to hide all content before it's shown to the user and immediately redirect to the real main page using javascript.

Semaphore answered 16/2, 2010 at 3:46 Comment(1)

This increases loading time for the normal case, while slightly improving experience for the abnormal case. As such it isn't a good idea. – Crissie 8/8, 2011 at 15:28

I like Doug's solution. However, if you need to redirect, I would remember that while there is a spec and a standard, the world of web browsers is a dirty, imperfect world. Whether or not something is allowed by the spec is not as important as whether or not it works in the set of browsers you care about.

Just look at the source code of any major site... Most of them won't validate I'd bet :)

Amati answered 16/2, 2010 at 5:25 Comment(0)

What about:

noscript{
z-index:100;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
min-height:1024px; background:#FFF;
}

And:

<noscript>
<p>Please <a href="no_js_instructions.php">enable Javascript</a> on your browser.</p></noscript>

Mattern answered 13/10, 2011 at 9:12 Comment(1)

Creative solution, but it should be position: fixed; instead of position: absolute;. – Keratinize 25/10, 2012 at 14:22

Recommended topics

Hot tags