views:

22501

answers:

23

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. Anyone know of some short/simple ways to detect if Javascript is disabled? my intention is to give 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 abscence of JS, but I need this detection as a place holder to start.

+10  A: 

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.

rslite
+45  A: 

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.

ConroyP
This isn't very effective. For example, it won't count anybody with text-only browsers, which normally don't have JavaScript support. At the very least, you should disable caching for that image.
Jim
Fair point, answer updated with caveat for non-js browsers
ConroyP
Would browsere which don't support JS at all not simply ignore the noscript tag and show the image?
LKM
@LKM: Depends on how they're written, most likely they would, so you'd make it a 1x1px dot. That option is mainly for tracking usage patterns server-side, so would still be ok, as it is triggered by a user without javascript capability.
ConroyP
Note that there is currently a bug with IE8 and the noscript tag if you style it... see positioniseverything.net/explorer.html
alex
+1  A: 

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.

Hank Gay
+4  A: 

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"&gt;data.&lt;/a&gt;
</noscript>
+4  A: 

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.

Joel Coehoorn
+2  A: 

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!

John Topley
+16  A: 

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 your're done: implement your JavaScript UI-enhancements.

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

roosteronacid
+2  A: 

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.

MrVolley
+27  A: 

I assume that you're trying to decide whether or not to deliver JavaScript enhanced content. Obviously the best thing to do is to degrade cleanly, so that your site still operates without JS, and I guess that you mean detection on the server-side, rather than just the use of <noscript> tags.

There isn't really a good way to do server-side JavaScript detection. The best option open to you is to use JavaScript to drop a cookie, and then test for that cookie in your server side scripting for future page views, and deliver content appropriately.

Marc Gear
<noscript> IS the most semanticly accurate way to specify non-javascript content - and rather then detecting if javascript is disabled, detect if it's enabled. So show the "you need javascript to properly use my site" message by default, but hide it with a javascript function immediately onLoad.
matt lohkamp
@matt lohkamp: Or even hide the message by default, and put a `<style>` block inside the `<noscript>` to unhide (no reflow there if JS enabled). Surprisingly, this works in all modern browsers, and even in IE6
Piskvor
+2  A: 

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 tags. (NOTE: NOSCRIPT is only available in Netscape Navigator 3.0 and up.)

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

Brad8118
+2  A: 

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

roryf
+7  A: 

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!

Andrew Hedges
+6  A: 

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.

David Wees
+1  A: 

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>
This is invalid. noscript elements cannot contain meta elements. I would not trust this to work reliably in all browsers (including future browsers which you cannot currently test in), as they may perform error recovery in different ways.
David Dorward
A: 

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.

No one said anything about XHTML. <noscript> is perfectly valid HTML 4.01 strict.
Tom
noscript is also perfectly valid in XHTML 1.0 and XHTML 1.1. It can't contain meta elements, and it should be avoided in favour of progressive enhancement, but it is part of the languages.
David Dorward
+1  A: 

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

+1  A: 

simply use the noscript tag and ask the user to enable javascript

http://www.w3schools.com/TAGS/tag%5Fnoscript.asp

Web Designer
Almost the same answer has already been given 1 year ago.
Ghommey
A: 

thanks a lot Ernie13 :D

Mehedi Hasan
+1  A: 

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 the 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...

Brian
+1  A: 

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

Jan Sahin
and a bit annoying if the user does have JS enabled and clicks on the link before your progressive javascript kicks in...
Simon_Weaver
Sure, but no issue reported yet.
Jan Sahin
A: 

Just force users to use javascript. If your site is worth visiting, they'll be happy to enable js. If they weren't that excited about arriving at your site in the first place, they may not be bothered.

Paul
this might work for some, but I need to be able to help the user understand why things arent working or wont work on our application. These things generate support requests and that creates costs our application needs to minimize to be profitable.
MikeJ
For better accessibility, web site should be accessible if browser disabled javascript.
Morgan Cheng
+3  A: 

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 "pagecontent". 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.

hairbo
+1 Interesting approach, I would never have thought of this...
musicfreak
A: 

I'm totally new to Javascript, in that I've never coded in it. The most I've done was to use jQuery plugins without altering them.

My aim is to use Javascript to detect whether an user has Javascript turned on or off. If Javascript has been disabled or the browser doesn't support it, then I want to display a message informing the user that Javascript is disabled and then provide a link to the non-Javascript version of my website. I don't want to use noscript because according to the SitePoint Reference it's bad practice to use noscript for displaying warning messages.

Any ideas? Can someone show me the optimal code to use?

Thanks.

Gemma