Check whether Javascript is enabled

Question

Is there a way to check whether Javascript is enabled or supported by the browser? If it's not supported, I would like to redirect the user to a user-friendly error page.

I am using jQuery and the PHP Zend Framework.

For what it's worth I still find creating a single page with "javascript enhancements" is a better solution (and easier to maintain) than two versions, but to each his/her own. — Brad Christie, Jul 13 '11 at 18:29
thank you for asking this for future folks who need it, like myself — khaverim, Nov 23 '12 at 18:15

score 20 · Accepted Answer · answered Jul 13 '11 at 18:20

20

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

This will redirect to an error page if script is disabled. Just replace error.html with the URL of your error page.

answered Jul 13 '11 at 18:20

Mike Samuel

118,113
30
216
245

2

imho `noscript` may only be placed in the body, but `meta` just in the head, so a document containing this will not validate. – marc Jul 13 '11 at 18:31
5

@marc, I think you are correct about HTML 4, but under HTML 5 that has changed. http://www.w3.org/TR/html5/scripting-1.html#the-noscript-element says "In a head element, ... The `noscript` element must contain only `link`, `style`, and `meta` elements" so `noscript` elements are both allowed in the `head` and when in the `head` can contain `meta` elements. – Mike Samuel Jul 13 '11 at 18:42
1

Why the 1 second delay? Is that intended to prevent an ugly flash of the javascript-enabled page? – jbaums Mar 23 '12 at 01:15
This method worked great for me. I had two js slide shows on my main page and the alt page wasn't too much trouble. So I built it and added this trick and voila! Nice advice. +1 – nicorellius Nov 02 '12 at 22:55

score 6 · Answer 2 · answered Jul 13 '11 at 18:24

As yet another option, you can (though it requires a second page visit) use javascript to set a cookie.

If the cookie exists server-side (they have javascript) render the page as normal. During the absense of the cookie, you can either use a Location redirect, or render the appropriate [stripped-down] template to accommodate their lack of javascript support.

page html

<script type="text/javascript">
  document.cookie = 'hasJS=true';
</script>

page php

if (isset($_COOKIE['hasJS'])){
  // normal page render
}else{
  header('Location: http://mysite.com/index-nojs.php');
}

score 4 · Answer 3 · answered Jul 13 '11 at 18:20

4

Whether or not javascript is enabled is only known from within the context of a browser, so the best you can do is write some browser-side code to set a flag based on if javascript is enabled or not. One possibility is do something like

<noscript><img src="/javascript_disabled.php"></noscript>

and

// contents of javascript_disabled.php
$_SESSION['javascript_disabled'] = 1;

answered Jul 13 '11 at 18:20

digitalbath

7,008
2
17
15

It works but only with this: `` – Joel Nov 09 '13 at 06:07

score 3 · Answer 4 · answered Jul 13 '11 at 18:18

3

As the default, send out the version without javascript. There you include a little piece of javascript that redirects to the dynamic version. This will only get executed when js is enabled.

answered Jul 13 '11 at 18:18

marc

6,103
1
28
33

score 2 · Answer 5 · answered Jul 13 '11 at 18:19

You can make a simple "landing page" for users without javascript AND add a javascript redirection to the javascript-enabled version of site.

Something like this:

...
<html>
...
<script type="text/javascript">
 window.location.replace("/hasjs");
</script>

score 1 · Answer 6 · edited Oct 02 '12 at 11:58

1

Piece of cake!

Encompass your entire Javascript page in one DIV.

Overlay a second DIV of equal size that contains your non-Javascript page. Give that DIV an id and a high z-index:

div id="hidejs" style="z-index: 200"

In this second non-JS DIV, have your very first code be Javascript that sets this DIV's visibility to hidden:

document.getElementById.("hidejs").style.visibility = "hidden";

No Javascript enabled? Nothing will happen and they'll see the overlying non-Javascript page.

Javascript enabled? The overlying non-Javascript page will be made invisible and they'll see the underlying Javascript page.

This also lets you keep the whole page in one file, making modifications easier, rather than trying to manage two files for the same page.

edited Oct 02 '12 at 11:58

j0k

22,600
28
79
90

answered Aug 06 '12 at 21:49

DMichael

11
1

Good effort man... The whole page in one file is good but really if it requires duplicating the whole stinkin' thing, I'd rather just have a separate file, as above – khaverim Nov 23 '12 at 18:14
You wouldn't have to have a duplicate for non-JS, you could just add a class that hides or gives a different styling to elements relying on JS. JS would then simply remove that class on page load. Anything's better than a stinkin' page that says you're not even allowed to visit the other page because you don't have JS enabled. – Sven Cazier Apr 20 '21 at 09:53

score 0 · Answer 7 · answered Jul 13 '11 at 18:20

0

Use <noscript> tags to include a meta-redirect if the page does not have JavaScript.

<noscript> tags are called when the browser connecting to the page does not have JavaScript.

answered Jul 13 '11 at 18:20

Nahydrin

13,197
12
59
101

score -1 · Answer 8 · answered Jul 13 '11 at 18:44

-1

Bring the user to the error page by default, and have a javascript redirect execute in the section of the page. Have the redirect push the user to the real page.

If they don't have javascript enabled, they won't get redirected and the rest of the page (error page) will load.

answered Jul 13 '11 at 18:44

Localghost

714
3
7

So you want users to potentially see an error page before the meta redirect is loaded? – John Cartwright Jul 14 '11 at 15:57
No, part of my response was eaten up by StackOverflow (I wrote >head<). Put the redirect in the head portion of the page, which will load before the body. If javascript is enabled, the body will never get a chance to load. – Localghost Jul 14 '11 at 20:45
Ah ok, you should have updated your answer, but I will remove the downvote. EDIT| I can only remove downvote once your answer is edited. – John Cartwright Jul 15 '11 at 17:01

score -4 · Answer 9 · edited Sep 23 '12 at 08:24

-4

Yes. Make you have the latest jQuery.

Javascript:

$(function(){ $('#jsEnabled2').html('Yes it is') })

PHP:

$js - 'No'; 
$jscheck = 'Javascript Enabled: '; 
$jscheck .= '<span id="jsEnabled">'.$js.'</span>';
print $jscheck;

edited Sep 23 '12 at 08:24

nhahtdh

55,989
15
126
162

answered Sep 23 '12 at 05:29

adswebwork

5,245
3
19
9

1

Including the "entire" jQuery libraries on your page just for this functionality is a little bit "over-kill" don't you think? That's +30K B only for this one little test. – Lix Sep 23 '12 at 17:13
1

I think you want to take a look at the code you posted again. Not only would it not work, there are also syntax errors. Please take care when posting answers. Test your code and make sure to proof read before submitting :) – Lix Sep 23 '12 at 17:13

Check whether Javascript is enabled

9 Answers9

Linked