What we want to achieve

• We want to ensure, when JavaScript is turned off, redirect the browser to a static page or to an error page.
• We would like to keep the XHTML compatibility
• Work in all popular browser (Mozilla Firefox, Internet Explorer, 6-7-8, Opera, Safari, Google Chrome)

I’ve never seen a solution posted anywhere like this, it’s my own idea. It’s a dirty hack, but it works

The way to the solition

In order to be able to jump without JS, the following meta tag can be used:

<meta http-equiv="refresh" content="0; url=nojs.html" />

If we place the above line to the header of the page, the browser immediately jump to the nojs.html.

It would be an obvious solution if you have JavaScript, you can erase the above line  from the DOM and you are done. But unfortunately, it won’t work, because the browser loads and compiles meta tags before the JavaScript can remove it…

Another obvious solution is to enclose the above line with <noscript> </ noscript> tags. The problem with this solution is not standard compliant, maybe even not works in all browser. But it was in our terms that we must care of the XHTML standard.

The solution

First, here is the code and then explain in detail:

<!-- *** Javascript Detect Hack *** -->
<script type="text/javascript"><!--
document.write("<\/script><script>/*");
//--></script>
<meta http-equiv="refresh" content="0; url=nojs.html" />
<script type="text/javascript">/* */</script>
<!-- ********* End of hack ******** -->

How does it work? If there is JavaScript, the script block before <meta> tag place the meta tag to a comment block, which won’t run this way.

Line by line (without the first and the last line of comment):

1. The start of the script block. If there is JavaScript, it will run. The
   “<!-” HTML comment at the beginning has to be there, because the script
   contains “<”, “>” signs, which can’t be in valid XHTML, and when the browser doesn’t know about <script>(or it is turned off) then it will miss this section.
2. We close the <script> block then open a new one with a start of a Javascript block comment.  This will hide the meta tag if the JavaScript is enabled.
   
3. This closes the first JavaScript block. When there is JavaScript this will be in comment, so won’t close anything. This must be in here because of the validator.
4. This will redirect the browser if there is no JS.
5. This line starts a new JS block. This is also in the JS comment, when JS is enabled until the “*/” characters. The “/*” is for the validator. And the last is the </script>, which close the dynamically opened script tag or if the JavaScript is disabled it closes the <sctipt> started the start of the line.

The point is that there are two levels and both level is correct without the other. The first level is when JavaScript is enabled, and the code is dynamically changed, the
other level is when there is no JS and the code is XHTML compliant.

A further problem

The user can turn off the meta refresh, although it is very uncommon.

Example

This is a working example: http://web2.bitbaro.hu/jshack/