Detect if JavaScript is enabled, jump if no JS + W3C validator

A lot of people – fear of viruses, browser bugs, adverts … – simply turn off the JavaScript function of web browsers.  This is a very great problem for today’s dynamic web pages or web applications, because in this case they could become completely ineffective. The user doesn’t think of he/she turned off  JavaScript, but rather blame the producer of the page. This method gives a solution for this. Redirect the user to a static page where we can explain why it is wrong to turn off the JavaScript :-)

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/

13 Responses to “Detect if JavaScript is enabled, jump if no JS + W3C validator”

  1. Lia

    Tuesday August 4th, 2009 03:18 PM

    This is not *live* yet (although you can get to it, no testing server.. sigh). Anyway, thank you. I was banging my head trying to figure out how to get this to validate and get my no-javascript style in that I needed.
    Eventually this will be http://www.creighton.edu.

    Thanks!
    Lia

  2. Wedge

    Tuesday August 4th, 2009 04:07 PM

    Hi Lia,

    I updated the article with a working example. You can see that is a valid XHTML 1.0 Strict, like your site.

  3. lacika

    Thursday August 27th, 2009 07:50 PM

    negyedik pr

  4. man and van

    Friday October 16th, 2009 11:58 PM

    great i dont understand it but it seem to be from web pages optimization

  5. Paul Morris

    Saturday October 17th, 2009 07:49 PM

    Thanks for this. Exactly what I was looking for on my drupal site.

  6. Laurie

    Saturday October 30th, 2010 09:05 AM

    Great Stuff!

    On one of my Ajax sites, I use meta refresh to update data for non-js browsers. For js-enabled browsers I needed a way to turn off the meta refresh as data is updated the Ajax way.

    Finally after hours of googling (and a couple of beers), I found your solution.

    I changed line 5 to make my validator happy.
    document.write(‘/*’);

    Thanks again.

  7. Laurie

    Saturday October 30th, 2010 09:09 AM

    Looks like my code change got clobbered.

    I had to add type equals text slash javascript to the second opening script tag.

    Cheers

  8. seobaglyak

    Saturday April 9th, 2011 03:24 PM

    Köszi! Ez igy valóban működik…

  9. Landry Adkins

    Thursday June 9th, 2011 03:01 PM

    I’m extremely inspired with your writing skills and even with the layout on your own weblog. Is this a paid subject matter or did anyone customize it on your own? Either way keep up to date the nice top quality writing, it’s rare to peer a nice weblog like that one nowadays..

  10. Ken Irwin

    Friday June 17th, 2011 08:58 PM

    This is brilliant! I would like to mention this code in an article I’m writing and I would like to be able to give you credit appropriately. I don’t see you name on the website anywhere?

    Would you please reply (either by email or here in the comments) to let me know how I can give you credit?

    Many thanks for this wonderful solution. I’m afraid I’ve been using illegal noscript tags to achieve this effect before!

  11. Petike

    Thursday June 30th, 2011 01:32 PM

    Some validators and robots detect with this script the webpage is redirected…
    This cause SEO problems… :( (

  12. home loan with bad credit

    Saturday March 9th, 2013 06:42 AM

    Hi there, just changed state aware of your websites using Research, determined that it is truly insightful.

  13. Misty Blast zone

    Thursday May 2nd, 2013 09:55 PM

    You really ensure it is appear really easy along
    with your presentation but I find this matter
    for being actually something which I believe I
    would never understand. It seems too complicated and very extensive i believe.

    I’m looking ahead for the subsequent post, I am going to attempt to obtain the hold from this!


WEB2.0 tricks

Log in

Lost your password?