How to detect if JavaScript is disabled?

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.

Does anyone know of some short/simple ways to detect if JavaScript is disabled? My intention is to give a warning that the site is not able to function properly without the browser having JS enabled.

Eventually I would want to redirect them to content that is able to work in the absence of JS, but I need this detection as a placeholder to start.

I'd like to add my .02 here. It's not 100% bulletproof, but I think it's good enough.

The problem, for me, with the preferred example of putting up some sort of "this site doesn't work so well without Javascript" message is that you then need to make sure that your site works okay without Javascript. And once you've started down that road, then you start realizing that the site should be bulletproof with JS turned off, and that's a whole big chunk of additional work.

So, what you really want is a "redirection" to a page that says "turn on JS, silly". But, of course, you can't reliably do meta redirections. So, here's the suggestion:

<noscript>
	<style type="text/css">
		.pagecontainer {display:none;}
	</style>
	<div class="noscriptmsg">
	You don't have javascript enabled.  Good luck with that.
	</div>
</noscript>

...where all of the content in your site is wrapped with a div of class "pagecontainer". The CSS inside the noscript tag will then hide all of your page content, and instead display whatever "no JS" message you want to show. This is actually what Gmail appears to do...and if it's good enough for Google, it's good enough for my little site.

I assume you're trying to decide whether or not to deliver JavaScript-enhanced content. The best implementations degrade cleanly, so that the site will still operate without JavaScript. I also assume that you mean [server-side][1] detection, rather than using the [<noscript>][2] element for an unexplained reason.

There is no good way to perform server-side JavaScript detection. As an alternative it is possible to [set a cookie using JavaScript][3], and then test for that cookie using server-side scripting upon subsequent page views. However this would be unsuitable for deciding what content to deliver, as it would not distinguish visitors without the cookie from new visitors or from visitors who are did not accept the JavaScript set cookie.

[1]: https://www.seguetech.com/client-server-side-code/ "'Client-Side vs. Server-Side Code: What’s the Difference?'" [2]: https://www.w3.org/TR/html52/semantics-scripting.html#the-noscript-element "WC3 Recommendation: The <noscript> element (HTML 5.2)" [3]: https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie "MDN: Document.cookie"

noscript blocks are executed when JavaScript is disabled, and are typically used to display alternative content to that you've generated in JavaScript, e.g.

<script type="javascript">
    ... construction of ajaxy-link,  setting of "js-enabled" cookie flag, etc..
</script>
<noscript>
    <a href="next_page.php?nojs=1">Next Page</a>
</noscript>

Users without js will get the next_page link - you can add parameters here so that you know on the next page whether they've come via a JS/non-JS link, or attempt to set a cookie via JS, the absence of which implies JS is disabled. Both of these examples are fairly trivial and open to manipulation, but you get the idea.

If you want a purely statistical idea of how many of your users have javascript disabled, you could do something like:

<noscript>
    <img src="no_js.gif" alt="Javascript not enabled" />
</noscript>

then check your access logs to see how many times this image has been hit. A slightly crude solution, but it'll give you a good idea percentage-wise for your user base.

The above approach (image tracking) won't work well for text-only browsers or those that don't support js at all, so if your userbase swings primarily towards that area, this mightn't be the best approach.

This is what worked for me: it redirects a visitor if javascript is disabled

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

I'd suggest you go the other way around by writing unobtrusive JavaScript.

Make the features of your project work for users with JavaScript disabled, and when you're done, implement your JavaScript UI-enhancements.

https://en.wikipedia.org/wiki/Unobtrusive_JavaScript

If your use case is that you have a form (e.g., a login form) and your server-side script needs to know if the user has JavaScript enabled, you can do something like this:

<form onsubmit="this.js_enabled.value=1;return true;">
    <input type="hidden" name="js_enabled" value="0">
    <input type="submit" value="go">
</form>

This will change the value of js_enabled to 1 before submitting the form. If your server-side script gets a 0, no JS. If it gets a 1, JS!

<noscript> isn't even necessary, and not to mention not supported in XHTML.

Working Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
    <title>My website</title>
    <style>
      #site {
          display: none;
      }
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js "></script>
    <script>
      $(document).ready(function() {
          $("#noJS").hide();
          $("#site").show();
      });
    </script>
</head>
<body>
    <div id="noJS">Please enable JavaScript...</div>
    <div id="site">JavaScript dependent content here...</div>
</body>
</html>

In this example, if JavaScript is enabled, then you see the site. If not, then you see the "Please enable JavaScript" message. The best way to test if JavaScript is enabled, is to simply try and use JavaScript! If it works, it's enabled, if not, then it's not...

Use a .no-js class on the body and create non javascript styles based on .no-js parent class. If javascript is disabled you will get all the non javascript styles, if there is JS support the .no-js class will be replaced giving you all the styles as usual.

 document.body.className = document.body.className.replace("no-js","js");

trick used in HTML5 boilerplate http://html5boilerplate.com/ through modernizr but you can use one line of javascript to replace the classes

noscript tags are okay but why have extra stuff in your html when it can be done with css

just a bit tough but (hairbo gave me the idea)

CSS:

.pagecontainer {
  display: none;
}

JS:

function load() {
  document.getElementById('noscriptmsg').style.display = "none";
  document.getElementById('load').style.display = "block";
  /* rest of js*/
}

HTML:

<body onload="load();">

  <div class="pagecontainer" id="load">
    Page loading....
  </div>
  <div id="noscriptmsg">
    You don't have javascript enabled. Good luck with that.
  </div>

</body>

would work in any case right? even if the noscript tag is unsupported (only some css required) any one knows a non css solution?

You can use a simple JS snippet to set the value of a hidden field. When posted back you know if JS was enabled or not.

Or you can try to open a popup window that you close rapidly (but that might be visible).

Also you have the NOSCRIPT tag that you can use to show text for browsers with JS disabled.

You'll want to take a look at the noscript tag.

<script type="text/javascript">
...some javascript script to insert data...
</script>
<noscript>
   <p>Access the <a href="http://someplace.com/data">data.</a></p>
</noscript>

Because I always want to give the browser something worthwhile to look at I often use this trick:

First, any portion of a page that needs JavaScript to run properly (including passive HTML elements that get modified through getElementById calls etc.) are designed to be usable as-is with the assumption that there ISN'T javaScript available. (designed as if it wasn't there)

Any elements that would require JavaScript, I place inside a tag something like:

<span name="jsOnly" style="display: none;"></span>

Then at the beginning of my document, I use .onload or document.ready within a loop of getElementsByName('jsOnly') to set the .style.display = ""; turning the JS dependent elements back on. That way, non-JS browsers don't ever have to see the JS dependent portions of the site, and if they have it, it appears immediately when it's ready.

Once you are used to this method, it's fairly easy to hybridize your code to handle both situations, although I am only now experimenting with the noscript tag and expect it will have some additional advantages.

The noscript tag works well, but will require each additional page request to continue serving useless JS files, since essentially noscript is a client side check.

You could set a cookie with JS, but as someone else pointed out, this could fail. Ideally, you'd like to be able to detect JS client side, and without using cookies, set a session server side for that user that indicates is JS is enabled.

A possibility is to dynamically add a 1x1 image using JavaScript where the src attribute is actually a server side script. All this script does is saves to the current user session that JS is enabled ($_SESSION['js_enabled']). You can then output a 1x1 blank image back to the browser. The script won't run for users who have JS disabled, and hence the $_SESSION['js_enabled'] won't be set. Then for further pages served to this user, you can decide whether to include all of your external JS files, but you'll always want to include the check, since some of your users might be using the NoScript Firefox add-on or have JS disabled temporarily for some other reason.

You'll probably want to include this check somewhere close to the end of your page so that the additional HTTP request doesn't slow down the rendering of your page.

Add this to the HEAD tag of each page.

<noscript>
        <meta http-equiv="refresh" runat="server" id="mtaJSCheck" content="0;logon.aspx" />
</noscript>

So you have:

<head>
    <noscript>
        <meta http-equiv="refresh" runat="server" id="mtaJSCheck" content="0;logon.aspx" />
    </noscript>
</head>

With thanks to Jay.

A common solution is to the meta tag in conjunction with noscript to refresh the page and notify the server when JavaScript is disabled, like this:

<!DOCTYPE html>
<html lang="en">
    <head>
        <noscript>
            <meta http-equiv="refresh" content="0; /?javascript=false">
        </noscript>
        <meta charset="UTF-8"/>
        <title></title>
    </head>
</html>

In the above example when JavaScript is disabled the browser will redirect to the home page of the web site in 0 seconds. In addition it will also send the parameter javascript=false to the server.

A server side script such as node.js or PHP can then parse the parameter and come to know that JavaScript is disabled. It can then send a special non-JavaScript version of the web site to the client.

This is the "cleanest" solution id use:

<noscript>
    <style>
        body *{ /*hides all elements inside the body*/
            display: none;
        }
        h1{ /* even if this h1 is inside head tags it will be first hidden, so we have to display it again after all body elements are hidden*/
            display: block;
        }
    </style>
    <h1>JavaScript is not enabled, please check your browser settings.</h1>
</noscript>

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.

You might, for instance, use something like document.location = 'java_page.html' to redirect the browser to a new, script-laden page. Failure to redirect implies that JavaScript is unavailable, in which case you can either resort to CGI ro utines or insert appropriate code between the

credit http://www.intranetjournal.com/faqs/jsfaq/how12.html

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!

I think you could insert an image tag into a noscript tag and look at the stats how many times your site and how often this image has been loaded.

People have already posted examples that are good options for detection, but based on your requirement of "give warning that the site is not able to function properly without the browser having JS enabled". You basically add an element that appears somehow on the page, for example the 'pop-ups' on Stack Overflow when you earn a badge, with an appropriate message, then remove this with some Javascript that runs as soon as the page is loaded (and I mean the DOM, not the whole page).

code inside <noscript> tags will be executed when there is no js enabled in browser. we can use noscript tags to display msg to turn on JS as below.<noscript> <h1 style="text-align: center;">enable java script and reload the page</h1> </noscript> while keeping our website content inside body as hidden. as below

<body>
<div id="main_body" style="display: none;">
website content.
</div>
</body>

now if JS is turned on you can just make the content inside your main_body visible as below

<script type="text/javascript">
document.getElementById("main_body").style.display="block";
</script>

Why don't you just put a hijacked onClick() event handler that will fire only when JS is enabled, and use this to append a parameter (js=true) to the clicked/selected URL (you could also detect a drop down list and change the value- of add a hidden form field). So now when the server sees this parameter (js=true) it knows that JS is enabled and then do your fancy logic server-side.
The down side to this is that the first time a users comes to your site, bookmark, URL, search engine generated URL- you will need to detect that this is a new user so don't look for the NVP appended into the URL, and the server would have to wait for the next click to determine the user is JS enabled/disabled. Also, another downside is that the URL will end up on the browser URL and if this user then bookmarks this URL it will have the js=true NVP, even if the user does not have JS enabled, though on the next click the server would be wise to knowing whether the user still had JS enabled or not. Sigh.. this is fun...

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 ;).

You don't detect whether the user has javascript disabled (server side or client). Instead, you assume that javascript is disabled and build your webpage with javascript disabled. This obviates the need for noscript, which you should avoid using anyway because it doesn't work quite right and is unnecessary.

For example, just build your site to say <div id="nojs">This website doesn't work without JS</div>

Then, your script will simply do document.getElementById('nojs').style.display = 'none'; and go about its normal JS business.

Check for cookies using a pure server side solution i have introduced [here](https://stackoverflow.com/questions/9205051/a-php-function-to-check-for-cookies "A PHP function to check for cookies") 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

In some cases, doing it backwards could be sufficient. Add a class using javascript:

// Jquery
$('body').addClass('js-enabled');

/* CSS */
.menu-mobile {display:none;}
body.js-enabled .menu-mobile {display:block;}

This could create maintenance issues on anything complex, but it's a simple fix for some things. Rather than trying to detect when it's not loaded, just style according to when it is loaded.

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()) . "'");

I've figured out another approach using css and javascript itself.
This is just to start tinkering with classes and ids.

The CSS snippet:

1. Create a css ID rule, and name it #jsDis.
   

2. Use the "content" property to generate a text after the BODY element. (You can style this as you wish).
   3 Create a 2nd css ID rule and name it #jsEn, and stylize it. (for the sake of simplicity, I gave to my #jsEn rule a different background color.

The JavaScript snippet:

1. Create a function.
   

2. Grab the BODY ID with getElementById and assign it to a variable.
   

3. Using the JS function 'setAttribute', change the value of the ID attribute of the BODY element.
   

The HTML part.

1. Name the BODY element attribute with the ID of #jsDis.
   

2. Add the onLoad event with the function name. (jsOn()).

Because of the BODY tag has been given the ID of #jsDis:

• If Javascript is enable, it will change by himself the attribute of the BODY tag.
  
• If Javascript is disable, it will show the css 'content:' rule text.
  
  

You can play around with a #wrapper container, or with any DIV that use JS.

Hope this helps to get the idea.

Detect it in what? JavaScript? That would be impossible. If you just want it for logging purposes, you could use some sort of tracking scheme, where each page has JavaScript that will make a request for a special resource (probably a very small gif or similar). That way you can just take the difference between unique page requests and requests for your tracking file.

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.

For those who just want to track if js was enabled, how about using an ajax routine to store the state? For example, I log all visitors/visits in a set of tables. The JSenabled field can be set to a default of FALSE, and the ajax routine would set it to TRUE, if JS is enabled.

Here is a PHP script which can be included once before any output is generated. It is not perfect, but it works well enough in most cases to avoid delivering content or code that will not be used by the client. The header comments explain how it works.

<?php
/*****************************************************************************
 * JAVASCRIPT DETECTION                                                      *
 *****************************************************************************/

// Progressive enhancement and graceful degradation are not sufficient if we
// want to avoid sending HTML or JavaScript code that won't be useful on the
// client side.  A normal HTTP request will not include any explicit indicator
// that JavaScript is enabled in the client.  So a "preflight response" is
// needed to prompt the client to provide an indicator in a follow-up request.
// Once the state of JavaScript availability has been received the state of
// data received in the original request must be restored before proceding.
// To the user, this handshake should be as invisible as possible.
// 
// The most convenient place to store the original data is in a PHP session.
// The PHP session extension will try to use a cookie to pass the session ID
// but if cookies are not enabled it will insert it into the query string.
// This violates our preference for invisibility.  When Javascript is not
// enabled the only way to effect a client side redirect is with a "meta"
// element with its "http-equiv" attribute set to "refresh".  In this case
// modifying the URL is the only way to pass the session ID back.
//
// But when cookies are disabled and JavaScript is enabled then a client side
// redirect can be effected by setting the "window.onload" method to a function
// which submits a form.  The form has a "method" attribute of "post" and an
// "action" attribute set to the original URL.  The form contains two hidden
// input elements, one in which the session ID is stored and one in which the
// state of JavaScript availability is stored.  Both values are thereby passed
// back to the server in a POST request while the URL remains unchanged.  The
// follow-up request will be a POST even if the original request was a GET, but
// since the original request data is restored, the containing script ought to
// process the request as though it were a GET.

// In order to ensure that the constant SID is defined as the caller of this
// script would expect, call session_start if it hasn't already been called.
$session = isset($_SESSION);
if (!$session) session_start();

// Use a separate session for Javascript detection.  Save the caller's session
// name and ID.  If this is the followup request then close the caller's
// session and reopen the Javascript detection session.  Otherwise, generate a
// new session ID, close the caller's session and create a new session for
// Javascript detection.
$session_name = session_name();
$session_id = session_id();
session_write_close();
session_name('JS_DETECT');
if (isset($_COOKIE['JS_DETECT'])) {
	session_id($_COOKIE['JS_DETECT']);
} elseif (isset($_REQUEST['JS_DETECT'])) {
	session_id($_REQUEST['JS_DETECT']);
} else {
	session_id(sha1(mt_rand()));
}
session_start();

if (isset($_SESSION['_SERVER'])) {
	// Preflight response already sent.
	// Store the JavaScript availability status in a constant.
	define('JS_ENABLED', 0+$_REQUEST['JS_ENABLED']);
	// Store the cookie availability status in a constant.
	define('COOKIES_ENABLED', isset($_COOKIE['JS_DETECT']));
	// Expire the cookies if they exist.
	setcookie('JS_DETECT', 0, time()-3600);
	setcookie('JS_ENABLED', 0, time()-3600);
	// Restore the original request data.
	$_GET = $_SESSION['_GET'];
	$_POST = $_SESSION['_POST'];
	$_FILES = $_SESSION['_FILES'];
	$_COOKIE = $_SESSION['_COOKIE'];
	$_SERVER = $_SESSION['_SERVER'];
	$_REQUEST = $_SESSION['_REQUEST'];
	// Ensure that uploaded files will be deleted if they are not moved or renamed.
	function unlink_uploaded_files () {
		foreach (array_keys($_FILES) as $k)
			if (file_exists($_FILES[$k]['tmp_name']))
				unlink($_FILES[$k]['tmp_name']);
	}
	register_shutdown_function('unlink_uploaded_files');
	// Reinitialize the superglobal.
	$_SESSION = array();
	// Destroy the Javascript detection session.
	session_destroy();
	// Reopen the caller's session.
	session_name($session_name);
	session_id($session_id);
	if ($session) session_start();
	unset($session, $session_name, $session_id, $tmp_name);
	// Complete the request.
} else {
	// Preflight response not sent so send it.
	// To cover the case where cookies are enabled but JavaScript is disabled,
	// initialize the cookie to indicate that JavaScript is disabled.
	setcookie('JS_ENABLED', 0);
	// Prepare the client side redirect used when JavaScript is disabled.
	$content = '0; url='.$_SERVER['REQUEST_URI'];
	if (!$_GET['JS_DETECT']) {
		$content .= empty($_SERVER['QUERY_STRING']) ? '?' : '&';
		$content .= 'JS_DETECT='.session_id();
	}
	// Remove request data which should only be used here.
	unset($_GET['JS_DETECT'],$_GET['JS_ENABLED'],
			$_POST['JS_DETECT'],$_POST['JS_ENABLED'],
			$_COOKIE['JS_DETECT'],$_COOKIE['JS_ENABLED'],
			$_REQUEST['JS_DETECT'],$_REQUEST['JS_ENABLED']);
	// Save all remaining request data in session data.
	$_SESSION['_GET'] = $_GET;
	$_SESSION['_POST'] = $_POST;
	$_SESSION['_FILES'] = $_FILES;
	$_SESSION['_COOKIE'] = $_COOKIE;
	$_SESSION['_SERVER'] = $_SERVER;
	$_SESSION['_REQUEST'] = $_REQUEST;
	// Rename any uploaded files so they won't be deleted by PHP.  When using
	// a clustered web server, upload_tmp_dir must point to shared storage.
	foreach (array_keys($_FILES) as $k) {
		$tmp_name = $_FILES[$k]['tmp_name'].'x';
		if (move_uploaded_file($_FILES[$k]['tmp_name'], $tmp_name))
			$_SESSION['_FILES'][$k]['tmp_name'] = $tmp_name;
	}
// Have the client inform the server as to the status of Javascript.
?>
<!DOCTYPE html>
<html>
<head>
	<script>
		document.cookie = 'JS_ENABLED=1';
// location.reload causes a confirm box in FireFox
//		if (document.cookie) { location.reload(true); }
		if (document.cookie) { location.href = location; }
	</script>
	<meta http-equiv="refresh" content="<?=$content?>" />
</head>
<body>
	<form id="formid" method="post" action="" >
		<input type="hidden" name="<?=$session_name?>" value="<?=$session_id?>" />
		<input type="hidden" name="JS_DETECT" value="<?=session_id()?>" />
		<input type="hidden" name="JS_ENABLED" value="1" />
	</form>
	<script>
		document.getElementById('formid').submit();
	</script>
</body>
</html>
<?php
	exit;
}
?>

Here is the twist! There might be client browsers with enabled Javascript and who use JS compatible browsers. But for what ever the reason Javascript does not work in the browser (ex: firewall settings). According to statistics this happens every 1 out of 93 scenarios. So the server detects the client is capable of executing Javascript but actually it doesn't!

As a solution I suggest we set a cookie in client site then read it from server. If the cookie is set then JS works fine. Any thoughts ?

Of course, Cookies and HTTP headers are great solutions, but both would require explicit server side involvement.

For simple sites, or where I don't have backend access, I prefer client side solutions.

--

I use the following to set a class attribute to the HTML element itself, so my CSS can handle pretty much all other display type logic.

METHODS:

1) place <script>document.getElementsByTagName('html')[0].classList.add('js-enabled');</script> above the <html> element.

WARNING!!!! This method, will override all <html> class attributes, not to mention may not be "valid" HTML, but works in all browsers, I've tested it in.

*NOTES: Due to the timing of when the script is run, before the <html> tag is processed, it ends up getting an empty classList collection with no nodes, so by the time the script completes, the <html> element will be given only the classes you added.

2) Preserves all other <html> class attributes, simply place the script <script>document.getElementsByTagName('html')[0].classList.add('js-enabled');</script> right after the opening <html> tag.

In both cases, If JS was disabled, then no changes to the <html> class attributes will be made.

ALTERNATIVES

Over the years I've used a few other methods:

    <script type="text/javascript">
    <!-- 
        (function(d, a, b){ 
        	let x = function(){
	        	// Select and swap
	        	let hits = d.getElementsByClassName(a);
	        	for( let i = hits.length - 1; i >= 0; i-- ){
	        		hits[i].classList.add(b);
	        		hits[i].classList.remove(a);
	        	}
	        };
        	// Initialize Second Pass...
        	setTimeout(function(){ x(); },0);
        	x();
        })(document, 'no-js', 'js-enabled' );
    -->
</script>

// Minified as:

<script type="text/javascript">
    <!-- 
        (function(d, a, b, x, hits, i){x=function(){hits=d.getElementsByClassName(a);for(i=hits.length-1;i>=0;i--){hits[i].classList.add(b);hits[i].classList.remove(a);}};setTimeout(function(){ x(); },0);x();})(document, 'no-js', 'js-enabled' );
    -->
</script>

• This will cycle through the page twice, once at the point where it is in the page, generally right after the <html> and once again after page load. Two times was required, as I injected into a header.tpl file of a CMS which I did not have backend access to, but wanted to present styling options for no-js snippets.

The first pass, would set set the .js-enabled class permitting any global styles to kick in, and prevented most further reflows. the second pass, was a catchall for any later included content.

REASONINGS:

The main reasons, I've cared if JS was enabled or not was for "Styling" purposes, hide/show a form, enable/disable buttons or restyle presentation and layouts of sliders, tables, and other presentations which required JS to function "correctly" and would be useless or unusable without JS to animate or handle the interactions.

Also, you can't directly detect with javascript, if javascript is "disabled"... only if it is "enabled", by executing some javascript, so you either rely on <meta http-equiv="refresh" content="2;url=/url/to/no-js/content.html" /> or you can rely on css to switch styles and if javascript executes, to switch to a "js-enabled" mode.

Why do you need to know server-side if JavaScript is enabled? Does it matter which variant the browser supports? Does it e.g. need to understand keyword let or is just var okay?

I'd recommend sending readable content that doesn't require any JavaScript to be accessible and then just try to load JS file to add all the JS behaviors you want in addition.

For example, the UI might end up missing Login or Modify button if JS is not enabled and it might include a small text at the bottom (using <noscript> or some element with CSS animation that shows the text after a small delay if JS code doesn't remove the whole element soon enough) saying "To login/modify this content, you must enable JavaScript support in your browser." If you do this well, the reader may not even notice that anything is missing unless he or she is trying to login or modify the content.

As an optimization you could then set cookie with JavaScript and the server could avoid sending the non-JavaScript readable content if you wish to acquire it asyncronously for some reason. Just make sure to only set this cookie after the JS code has run into completion at least once, instead of setting it immediately the JS code starts to run, to make sure that the end user doesn't end up with a blank screen when (not if!) the JS code fails for any reason.

(Note that loading the initial page state asyncronous will not get that content to end user any faster. However, you could only send part of the total content without JavaScript. That could allow rendering "above the fold" faster and then asyncronously load rest of the page using JS code.)

As an added bonus, search engines can still index your site without any JavaScript enabled.

Update 2022

This question has already over 30 answers, but none of them seem to be clear or precise on what had to be done.

• Server Side Framework Used - ASP.NET Core
• Client side - vanilla js

On BaseController where the first entry point on the app which is OnActionExecutionAsync I have this piece of logic.

• Basically by default I assume client does not have javascript enabled and set this flag.

Response.Cookies.Append("jsEnabled", "false");

• Now after initial load on client I have a javascript function that updates this flag to true.
• This function will only have run when the environment has javascript

So the full solution is here.

Client

On Initial load add this function

function detectIfJavascriptIsEnabled() {
    // if this function run's which means js is enabled
    var jsEnabled = getCookie('jsEnabled');
    if (jsEnabled === 'false') {
        setCookie('jsEnabled', 'true');
        location.reload();
    }
}

Server

private bool ValidateIfEnvironmentHasJavascript() {
  if (HttpContext.Request.Cookies != null && HttpContext.Request.Cookies.Count > 0) {
    Boolean.TryParse(HttpContext.Request.Cookies["jsEnabled"], out
      var hasJavascriptEnabled);
    return hasJavascriptEnabled;
  } else {
    Response.Cookies.Append("jsEnabled", "false",
      new CookieOptions() {
        IsEssential = true, Expires = DateTime.UtcNow.AddHours(24)
      });
  }

  return false;
}

This is how you get the result

var environmentHasJavascript = ValidateIfEnvironmentHasJavascript();

I've had to solve the same problem yesterday, so I'm just adding my .001 here. The solution works for me ok at least at the home page (index.php)

I like to have only one file at the root folder: index.php . Then I use folders to structure the whole project (code, css, js, etc). So the code for index.php is as follows:

http://www.w3.org/1999/xhtml">

<head>
	<title>Please Activate Javascript</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> 
</head>

<body>
	
<script language="JavaScript">
	$(document).ready(function() {
		location.href = "code/home.php";
	});   
</script>

<noscript>
	<h2>This web site needs javascript activated to work properly. Please activate it. Thanks!</h2>
</noscript>

</body>

</html>

Hope this helps anyone. Best Regards.

Might sound a strange solution, but you can give it a try :

<?php $jsEnabledVar = 0; ?>    

<script type="text/javascript">
var jsenabled = 1;
if(jsenabled == 1)
{
   <?php $jsEnabledVar = 1; ?>
}
</script>

<noscript>
var jsenabled = 0;
if(jsenabled == 0)
{
   <?php $jsEnabledVar = 0; ?>
}
</noscript>

Now use the value of '$jsEnabledVar' throughout the page. You may also use it to display a block indicating the user that JS is turned off.

hope this will help