Rectangle 27 0

html How to detect if JavaScript is disabled?


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

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

Note
Rectangle 27 0

html How to detect if JavaScript is disabled?


Note
Rectangle 27 0

html How to detect if JavaScript is disabled?


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

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

Note
Rectangle 27 0

html How to detect if JavaScript is disabled?


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

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.

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

Cannot believe it took this long before someone mentioned the .nojs class! This is one of the most seamless approaches and puts noscript to shame.

Cannot believe it took this long before someone mentioned the .nojs class! This is one of the most seamless approaches and puts noscript to shame.

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.

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

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

Note
Rectangle 27 0

html How to detect if JavaScript is disabled?


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

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:

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

+1 Interesting approach, I would never have thought of this...

@steve ever try to validate google.com? validation just determines how close the document follows the spec sheet, it in no way effects the usability of the page.

@JonasGeiregat What's wrong with forcing the user to require Javascript if your web app was built - and requires - Javascript to function? I hear this comment too often, yet it's only valid for the most simple of sites. Try Facebook without JS and see what happens. If your app was built FOR Javascript, then what's wrong with requiring what 99% of users have enabled anyway?

@Kolors, I made that comment back in Mar 2012, and I'd argue that it's doubly-true today. Since then, we've had Meteor, Angular.Js, Famo.us, and a ton of amazing libraries that all require Javascript to even start. I do wonder what users who choose to disable JS are actually trying to achieve... clearly, they're not surfing the same web as the rest of us, and there's no reason a company should need to scale down their website for the tiniest sub-set of stubborn users...

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

@JonasGeiregat What's wrong with forcing the user to require Javascript if your web app was built - and requires - Javascript to function? I hear this comment too often, yet it's only valid for the most simple of sites. Try Facebook without JS and see what happens. If your app was built FOR Javascript, then what's wrong with requiring what 99% of users have enabled anyway?

@Kolors, I made that comment back in Mar 2012, and I'd argue that it's doubly-true today. Since then, we've had Meteor, Angular.Js, Famo.us, and a ton of amazing libraries that all require Javascript to even start. I do wonder what users who choose to disable JS are actually trying to achieve... clearly, they're not surfing the same web as the rest of us, and there's no reason a company should need to scale down their website for the tiniest sub-set of stubborn users...

@Lee hits it on the nail, you can only do so much for the user before you draw the line on what you will support. We expect all users to have an internet enabled device, should I also implement a paper version of my site for those that refuse to access the internet?

@steve ever try to validate google.com? validation just determines how close the document follows the spec sheet, it in no way effects the usability of the page.

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

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:

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.

Note
Rectangle 27 0

html How to detect if JavaScript is disabled?


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

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:

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!

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:

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!

Note
Rectangle 27 0

html How to detect if JavaScript is disabled?


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

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

Note
Rectangle 27 0

html How to detect if JavaScript is disabled?


...except why are you concerned with validation? Are you validating just to validate? It may not be "correct" but if it works and accomplishes it "with a little dirt under the hood" what's the issue? Don't worry, I won't judge ;-)

<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 - I was doing this for a while, but the message stays up for a while on slow connections leaving users confused. I'm here looking for a different solution. @Piskvor - the <noscript> tag in the header will not validate, and a <style> tag in the body will not validate.

@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

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

It stays valid if you just use the style attribute to the given elements within the <noscript> tags (like <noscript><div style="color:red;">blahblah</div></noscript> or sg. similar). BUT it also stays valid if you put the <style> BLOCK normally in the header defining the style of some .noscript (or similar) classed elements, and in the body, within the <noscript> tags, you just give the given elements the previously defined .noscript class, like this: <noscript><div class="noscript">blahblah</div></noscript>

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

Note
Rectangle 27 0

html How to detect if JavaScript is disabled?


<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>
<noscript>
    <img src="no_js.gif" alt="Javascript not enabled" />
</noscript>
<noscript>
    <img src="no_js.gif" alt="Javascript not enabled" />
</noscript>
<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>

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.

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:

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

Would browsere which don't support JS at all not simply ignore the noscript tag and show the image?

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

also you can serve that image as a server-side script, setting the mime-type, and use that to log some information about the user or drop a cookie... px.sklar.com/code.html/id=256

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

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

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

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.

Would browsere which don't support JS at all not simply ignore the noscript tag and show the image?

also you can serve that image as a server-side script, setting the mime-type, and use that to log some information about the user or drop a cookie... px.sklar.com/code.html/id=256

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.

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.

Note
Rectangle 27 0

html How to detect if JavaScript is disabled?


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.

Sure, but no issue reported yet.

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.

and a bit annoying if the user does have JS enabled and clicks on the link before your progressive javascript kicks in...

Note