check if JavaScript is enabled

Yii 1.1 Tips, Snippets and Tutorials
1

I see couple of questions in the forum asks what is the best solution to check if the user browser support JavaScript or if the JavaScript is disabled in the browser.

I want to share my experience, and write the best technique i found to come across this issue (any suggestions will be welcome).

In short this achieved by using <noscript> tag (HTML tag) instead of jQuery show()/hide() solution that i see most, which will show the you a noising flashy message ;).

there is tow ways to do this:

1. only message:


<html>

<head>

  <noscript>

	Your browser does not support JavaScript! or JavaScript is disabled.

  </noscript>

  <!-- don't forget to import your jQuery somewhere in the head -->

</head>

<body>

<div id="content" style="display:none;">

  <!-- your web site content is here -->

</div>

<script type="text/javascript">

$(document).ready(function() {

  $("#content").show();

});

</script>

</body>

</html>

2. Redirect the visitor:


<html>

<head>

  <noscript>

	<meta http-equiv="refresh" content="0; URL=http://www.google.com/"/>

  </noscript>

  <!-- don't forget to import your jQuery somewhere in the head -->

</head>

<body>

<div id="content" style="display:none;">

  <!-- your web site content is here -->

</div>

<script type="text/javascript">

$(document).ready(function() {

  $("#content").show();

});

</script>

</body>

</html>

of course you have to change http://www.google.com/ to your page that supports a non-JavaScript browsing.

you may also redirect the visitor after couple of seconds and put the message before moving to other page.

and you can redirect a users to an Action in your default controller to save a session or cookie for example and always show a non-JavaScript content to this particular visitor to avoid a lot of redirecting.

i hope this tip and short code will help someone :)

2

One of the solutions is to give the BODY tag a class like "no-js"… and then with javascript / jQuery remove it and process the code as you need it…

This way you can even define CSS for the non-javascript enabled users… like: .no-js yourclass {…}

3

nice addition that i didn’t think of.

but this way we will facing the same problem if the JavaScript is enabled (i mean flashing content), ex: if the background-color for .no-js class is red then we will see a flashy red before the actual content appear.

to solve this i think we will add a new element to our <noscript> tag which is a link to a no-js.css file like this


<html>

<head>

  <noscript>

    <link rel="stylesheet" type="text/css" href="path/to/no-js.css" />

    Your Browser should enable JavaScript !

  </noscript>

  <!-- don't forget to import your jQuery somewhere in the head -->

</head>

<body>

<div id="content" style="display:none;">

  <!-- your web site content is here -->

</div>

<script type="text/javascript">

$(document).ready(function() {

  $("#content").show();

});

</script>

</body>

</html>

and we MUST but the <noscript> tag after main css link tag because we have to override the main css body tag which will be written inside no-js.css

you can test that flashy content by: $("body").removeClass("no-js");

thank you.

4

Generally the NOSCRIPT tag is better to be avoided… there are some possible "problems" with the NOSCRIPT - http://stackoverflow…-google-penalty

Edit: and for flickering there are other solutions - http://james.padolsey.com/javascript/avoiding-dom-flickering/

5

Use HTML5 and modernizr:

http://weblogs.asp.n…oilerplate.aspx

This code should go at the top of your main.php:





<!doctype html>

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->

<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->

<!--[if IE 7 ]>    <html class="no-js ie7" lang="en"> <![endif]-->

<!--[if IE 8 ]>    <html class="no-js ie8" lang="en"> <![endif]-->

<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]—>

Then ‘html’ will get a class of ‘no-js’, which you can use in your CSS:





.no-js h1 { display: none; } /* Hide h1 tags if Javascript is disabled */

Use modernizr to change the ‘no-js’ to ‘js’ if the browser supports javascript.


<script src="js/libs/modernizr-1.7.min.js"></script>

You would use modernizr if you’re using html5 / css3.

6

@mdomba: SEO is a serious problem !

i tested the code in your last link and it worked great for me … i think i will switch to this method instead of <noscript> tag.

here is the code for referencing:


<html>

  <head>

	<style type="text/css">

    	body.js .nojs { display: none; }

	</style>

  </head>

<body>


  <!-- BODY element exists! -->

  <script>

	document.body.className += ' js';

  </script>


  <div class="nojs">

	... No flicker!

  </div>

</body>

</html>

@jacmoe: really great resource thank you, i have to study the whole Boilerplate template not just modernizr since it is cross-browser and support html5, and i think it is the time that i have to move on and look at HTML5 :)