Check if Javascript is enabled

[RLJ]

Hi all,

 

I have spent hours browsing the internet for examples of a simple but effective way of determining whether the user has javascript enabled on their browser. There seems to be a vast quantity of methods of varying degrees of complexity.

 

Any suggestions pls for a reliable but easy-to-implement way?

 

I'm currently going down the road of setting a hidden element to a value 'Disabled' when the page loads and then getting Javascript to change its value to 'Enabled' and then checking what value the element has, but I've got stuck and am not even sure whether this is really the best way to go about it.

 

Thanks!

[Philip]

In the HTML set the value to Disabled, and then when the DOM is ready, run JS to change it... just like you said. Probably the easiest and most straightforward way.

 

You could also use a noscript tag, but the way you're thinking about doing it is perfectly fine.

[haku]

King Phillip is perfectly correct. But if you give more info on what your overall goal is, we may be able to give more suggestions about how you can go about doing this in a different way. I generally find it's better to make things work automatically without having to check if javascript is enabled, though it's definitely not possible in all cases.

[RLJ]

OK thanks for your replies.

 

The goal is to check whether Javascript is enabled or not in each of the webpages (that requires javascript) of my website, and if it's not enabled to navigate away to a different page that tells the user to enable javascript.

 

I understand how to do the html part (create hidden element with value "disabled") and the Javascript part (change value to "enabled"), but I'm unsure how to do the "check the value and possibly navigate away" part. Should I use PHP for this last part? Could you give me some help with the coding? I don't know of a way to use PHP to check the value of an element without a form being submitted.

 

Thanks!

 

[Philip]

If you're wanting to separate traffic based on JS, then have it go to the non-js page first. On that page have something like:

<script type="text/language">
window.location = "js-enabled.html";
</script>

[haku]

The goal is to check whether Javascript is enabled or not in each of the webpages (that requires javascript) of my website, and if it's not enabled to navigate away to a different page that tells the user to enable javascript.

 

This is actually bad practice for a few reasons. First, as a personal example, I use a plugin in my browser, no-script. This plug-in blocks javascript by default, with an icon that can be clicked to allow javascript access. It's one of the more popular firefox plugins. When you put the user on a second page that says to enable javascript, if I enable javascript on that page - I'm still on that page. If you keep the user on the same page as normal with a div asking to enable javascript, when I enable javascript I'm on the correct page, and the page will reload properly. With your method I'm on some other page and have to figure out how to navigate to the page I want.

 

The next is search engines - if you are directing people without javascript to the page, then search engines can never index your content (they don't use javascript), and you will never show up in the search engines for anything based on your content.

 

The last reason is 'graceful degradation', or something very similar, 'progressive enhancement'. Basically, you should be careful about cutting off users who don't have javascript enabled. Some of these users will be on devices that don't support javascript, and others won't visit untrusted sites that require javascript. So you are cutting off some of your users. With graceful degradation, you build a site that will work without javascript, but put announcements like 'this site runs better with javascript' into your page. Progressive enhancement is the concept of building a site that works entirely without javascript, but if you have it, will add extra flashy stuff. The person who doesn't have javascript enabled is able to use the entire site without realizing that having javascript provides a more in-depth experience.

 

I strongly recommend using GD or PE. These are basically the standards these days. I strongly recommend against directing users to another page if they don't have javascript enabled.

[RLJ]

Thanks for your help guys.

 

@haku:

The pages where I want to check for Javascript are ones that I don't particularly need to have indexed by search engines (I think). As to the no-script plugin, I have the following:

 

<html>
<head>
<script language='JavaScript'>
window.location = 'actualpage.php';
</script>
</head>

<body>
This website requires Javascript to be enabled in your browser. <br />
Please enable Javascript and try again.
</body>

</html>

 

so am I correct in thinking that if you click to allow Javascript on this page (and refresh) it will navigate to the correct page (actualpage.php)?

[BLaZuRE]

Yes, it'll work.  Though, if I had the time, I would see what mayhem would occur by looking at the source code, copying the javascript page it redirects to, and see what renders without the javascript.  But that's just me.

[RLJ]

Cool.

 

The page the javascript redirects to actually has PHP code in it that will redirect the user back to the "check javascript page" if he/she hasn't gone past there already. So....... should be fairly watertight........

[.josh]

This whole "js enabled/disabled" argument is way outdated. Requiring a user to have js enabled in order to visit the site has not been "bad practice" for a very long time.  Keep in mind that first and foremost, the percent of users who do NOT have js enabled is very low to begin with, and that % continues to decrease.  I have worked with many big name high dollar clients/brands that have no issues with only catering to js enabled users...I mean seriously, we're talking like 1-6% of users that have it disabled, depending on what reports you wanna look at.

 

The only thing that remains current/relevant about js dangers is to not solely rely on it for validating data, since a user can easily bypass it.

 

And as far as having a "no js" message appear on a separate page vs. same page...that is moot.  Even if you put a message in a noscript tag inside a div or whatever, the user would still have to reload the page in order to get any js on the page running. 

 

In my personal experience and opinion, the most "graceful" thing to do, and what I most commonly see, is to have a splash page or div use js to detect that it is enabled. Output a "loading.." type message.  Use js to redirect/reload the page w/ a hidden form field or GET var like js=true or whatever.  But also include in the loading message a message that says something like "if you are not redirected/page loaded/whatever in 5s then click this link" and have a link with js=false.  Then have server-side logic that loads your page with js or no js, based on that js GET var. 

 

And that's if you even want to cater to non-js users to begin with: again, something that has been perfectly acceptable for a long time.  IMO the only reason you would still want to do that is if you are planning to cater to mobile users, because there are still a fair amount of mobile users out there that do not have js enabled, or have extremely watered down versions of js.