How to detect if JavaScript is disabled?

Question

There was a post this morning asking about how many people disable JavaScript. Then I began to wonder what techniques might be used to determine if the user has it disabled.

Answer 1

I would like to add my solution to get reliable statistics on how many real users visit my site with javascript disabled over the total users. The check is done one time only per session with these benefits:

• Users visiting 100 pages or just 1 are counted 1 each. This allows to focus on single users, not pages.
• Does not break page flow, structure or semantic in anyway
• Could logs user agent. This allow to exclude bots from statistics, such as google bot and bing bot which usually have JS disabled! Could also log IP, time etc...
• Just one check per session (minimal overload)

My code uses PHP, mysql and jquery with ajax but could be adapted to other languanges:

Create a table in your DB like this one:

CREATE TABLE IF NOT EXISTS `log_JS` (
  `logJS_id` int(11) NOT NULL AUTO_INCREMENT,
  `data_ins` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `session_id` varchar(50) NOT NULL,
  `JS_ON` tinyint(1) NOT NULL DEFAULT '0',
  `agent` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`logJS_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8;

Add this to every page after using session_start() or equivalent (jquery required):

<?  if (!isset($_SESSION["JSTest"]))
    { 
        mysql_query("INSERT INTO log_JS (session_id, agent) VALUES ('" . mysql_real_escape_string(session_id()) . "', '" . mysql_real_escape_string($_SERVER['HTTP_USER_AGENT']). "')"); 
        $_SESSION["JSTest"] = 1; // One time per session
        ?>
        <script type="text/javascript">
            $(document).ready(function() { $.get('JSOK.php'); });
        </script>
        <?
    }
?>

Create the page JSOK.php like this:

<?
include_once("[DB connection file].php");   
mysql_query("UPDATE log_JS SET JS_ON = 1 WHERE session_id = '" . mysql_real_escape_string(session_id()) . "'");

Answer 2

Adding a refresh in meta inside noscript is not a good idea.

1. Because noscript tag is not XHTML compliant

2. The attribute value "Refresh" is nonstandard, and should not be used. "Refresh" takes the control of a page away from the user. Using "Refresh" will cause a failure in W3C's Web Content Accessibility Guidelines --- Reference http://www.w3schools.com/TAGS/att_meta_http_equiv.asp.

Answer 3

If javascript is disabled your client-side code won't run anyway, so I assume you mean you want that info available server-side. In that case, noscript is less helpful. Instead, I'd have a hidden input and use javascript to fill in a value. After your next request or postback, if the value is there you know javascript is turned on.

Be careful of things like noscript, where the first request may show javascript disabled, but future requests turn it on.

Answer 4

A technique I've used in the past is to use JavaScript to write a session cookie that simply acts as a flag to say that JavaScript is enabled. Then the server-side code looks for this cookie and if it's not found takes action as appropriate. Of course this technique does rely on cookies being enabled!

Answer 5

To force users to enable JavaScripts, I set 'href' attribute of each link to the same document, which notifies user to enable JavaScripts or download Firefox (if they don't know how to enable JavaScripts). I stored actual link url to the 'name' attribute of links and defined a global onclick event that reads 'name' attribute and redirects the page there.

This works well for my user-base, though a bit fascist ;).

Answer 6

Check for cookies using a pure server side solution i have introduced here then check for javascript by dropping a cookie using Jquery.Cookie and then check for cookie this way u check for both cookies and javascript