Ask a Jedi: Detect JavaScript with ColdFusion?

This post is more than 2 years old.

Jose asks:

Is there a way to check if JavaScript is enabled using Coldfusion?

The answer is absolutely not. JavaScript is client side. ColdFusion is server side. That being said, if you don't mind hacking it up a bit, it isn't too difficult to accomplish.

The simplest way is to use an intermediate web page. By that I mean when a user requests index.cfm, you output a page with JavaScript that uses JavaScript to change the location to something like index.cfm?jsenabled=1. The presence of the URL variable would tell you if JavaScript is enabled. A variation of this technique would use JavaScript to set a cookie that ColdFusion could then read.

In both cases though you can't do it in one request only. You would have to use two requests to figure it out.

Personally I prefer keeping it simple. Put a message on your web site and you're done. Detecting JavaScript isn't full proof, and even if you use code to check for JavaScript when someone enters your site, it is trivial to then turn it off later on.

Edit: I forgot to mention. I've used the excellent BrowserHack in the past for clients who insist on stuff like this.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Nathan Mische posted on 10/16/2008 at 6:20 AM

That's BrowserHawk. I've used it in the past and actually just recommend it to a co-worker a few days ago. It also has documentation for CF which is nice.

Comment 2 by Andy Matthews posted on 10/16/2008 at 7:04 AM

Actually, you can technically do it in one file (if you don't count an external file as the 2nd). Not saying that it's the best idea, but just use AJAX. Include the page contents using JS, or redirect the user to an alternate page using a meta refresh if they don't have JS enabled.

Comment 3 by John Whish posted on 10/16/2008 at 12:32 PM

There are a couple of ways I've dealt with this in the past.

One is the one you mentioned, which is to write a cookie to the browser with javascript (from your "global.js" include so it works on any landing page) which ColdFusion can check for (obviously the cookie wouldn't exist on the first request).

The second method I use for secure areas that need javascript. On the login form I have a hidden form field, I populate the value with javascript. When the form is submitted I check to see what the value of the form field is and then continue or notify the user that they need to enable javascript.

You made another good point that you can disable javascript later, so it shouldn't be relied on for security, data validation etc. I'm amazed by how many sites rely heavily on javascript for this type of thing.

Comment 4 by Tjarko Rikkerink posted on 10/16/2008 at 3:38 PM

I do something similar, i write the "hidden" formfield with document.write('') and if that variable does not exist on the receiving page i know that javascript isn't working. Especially with ajax requests it's extremely simple to build a receiving page that both handle the ajax as the normal request.

Comment 5 by Lisa Homstad posted on 10/16/2008 at 6:18 PM

What if you made a simple ajax call to set a coldfusion variable? After that point you could use coldfusion to check for the existence of javascript. If you do a meta refresh to an alternate page if javascript is disabled, you could end up having problems with search engines not being able to index your site. =\

Comment 6 by Raymond Camden posted on 10/16/2008 at 6:21 PM

Lisa, you can't mix client side and server side stuff like that. Yes, you can use Ajax to call a CFM to set some persistent variable. But you would then still need a second HTTP hit to _check_ that var. Ie, guy hits your .com. You use Ajax to set the CF variable. But you can't _do_ anything about that till the next hit if JS is turned off.

Comment 7 by Jose Diaz posted on 10/16/2008 at 6:53 PM

Hi Ray,

Thankyou for the post and to everyone that has responded.
I did try various routes including the route Lisa mentioned, but with a dirty hack using cftry/catch block.

I was essentially havinga brain fart the kind thing that happens late at night: cfdump => cflog => cfflush

As soon as I saw your response it was obvious, I used the following approach and it is working liek a dream:

<cfset settings.jsUrl = "http://#cgi.http_host##cgi.path_info#?#cgi.query_string#">
<cfif not isDefined("url.jsenabled")>
<script Language="JavaScript">
window.location.href="<cfoutput>#settings.jsurl#&jsenabled=1</cfoutput>";
</script>
</cfif>

I redirect back to the same template and then do some logic to process code if the jsenabled val is set.

Thanks Ray(Obi-Web Kenobi) Everyone.

Comment 8 by Jim Ruzicka posted on 10/16/2008 at 9:31 PM

For those who consider meta refresh - I have run into some cases where user's browsers have META refresh turned off.

Comment 9 by Lisa Homstad posted on 10/16/2008 at 10:31 PM

Just to clarify, by "after that point" I meant "...in your application in general" not the rest of the request. Probably not the best solution in the world, but it could work. :)

Comment 10 by James Edmunds posted on 10/16/2008 at 11:42 PM

I'm with Ray's suggestion of putting a message on the site warning that you won't get everything that's on offer without javascript.

My theory is that if you're dialing down to the small minority of visitors who have javascript turned off, these are the very visitors who are most likely to have something on their end that would trip up whatever evaluation I'm trying to run. And spiders don't want to see my pretty rollovers anyway ;).

Comment 11 by John Whish posted on 10/17/2008 at 12:04 PM

If you add a "you need javascript" message to your website you should use javascript to hide it, so it only shows for users with javascript disabled.

Comment 12 by Jose Diaz posted on 10/17/2008 at 12:54 PM

I should have mentioned, the reason I am doing a check is due to teh application being completly Ajax enabled and so needed to offer an alternative view for none JS enabled users. I have utilised the <noscript> route but needed to do some logic checking for search engine spidering.

So when a chunk of content is indexed and the link clicked if the user does not have jsenabled they go to the non Ajax version direct and if they do has JS enabled I do some coldfusion.naviaget code to drill down to a specific tab within teh Ajax app.

Hope that makes sense.

;)

Comment 13 by Todd Rafferty posted on 10/17/2008 at 6:22 PM

I went down this road once. I ended up falling back on HTML's noscript tag:
[noscript]Turn on JS!! :P[/noscript]

jQuery method:
[div id="nojs"]You currently have JS disabled.[/div]

If javascript is enabled, jquery just simply hides the div:
$("#nojs").hide();

Otherwise, the user gets an annoying styled message every time they come to the site and it's not my fault if things aren't working properly.

Comment 14 by Chris Hampton posted on 7/29/2009 at 12:59 AM

I thought of the cookie idea, but I don't like the idea of having the multiple requests. Basically what I have decided is that for the front end of the app, it will degrade as much as possible (with a message that JS is disabled). The backend will require JS to be enabled. I control the environment, so that works for me. I can just mandate my users have JS enabled.

Comment 15 by James Murgolo posted on 3/6/2010 at 5:35 AM

Thanks. Works like a charm.

Comment 16 by Aiden Huntley posted on 4/22/2010 at 8:15 PM

I tracked it with a simple iFrame, The problem with the cookie method is, I want to know if they have cookies enabled separately from JavaScript.
<noscript><iframe src="/lib/stats/noscript.cfm" frameborder="0" allowtransparency="true" scrolling="no" width="1" height="1"></iframe></noscript>

I am aware that some people have iframes disabled as well, but this gives me a general idea.

Comment 17 by Christian posted on 9/21/2011 at 5:20 PM

Try this. Create a "jsChecked.js" file:

function jsCheck(){

var ckd = document.js.checked.value;

if ( ckd == 'False'){
document.js.jsActive.value = 'True';
document.forms['js'].submit();
}
}

Then a cfm page named "jscheck.cfm":

<head>
<script type="text/javascript" src="jscheck.js"></script>

<cfif IsDefined("form.jsActive") AND #form.jsActive# EQ "True">
<cfset isChecked = "True" />
<cfelse>
<cfset isChecked = "False" />
</cfif>

</head>

<body onLoad="jsCheck()">

<cfoutput>

<form style="visibility:hidden;" name="js" id="js" action="jscheck.cfm" method="post" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="jsActive" id="jsActive" />
<input type="hidden" name="checked" id="checked" value="#isChecked#" />
</form>

<cfif IsDefined("form.jsActive") AND #form.jsActive# EQ "True">
#form.jsActive#
<cfelse>
JS Undefined
</cfif>

</cfoutput>