Main Tutorials

Display different content if JavaScript is disabled

For security concern, many users like to disable JavaScript in their web browser, and it raise a big problem in many website which depends on JavaScript to function well. The easy and simple solution is using the HTML “noscript” tag to display different content if JavaScript is disabled.

See following full “noscript” example :

  1. If JavaScript is disabled : Display warning message and hide the entire content with CSS.
  2. If JavaScript is enabled : Fine, do nothing.

<html>
<head></head>
<body>
<h1>noscript example</h1>
<noscript>
	<h2>JavaScript is disabled! Why you want to do so? 
	Please enable JavaScript in your web browser!</h2>

	<style type="text/css">
		#main-content { display:none; }
	</style>
</noscript>

<div id="main-content">
	<h2>Welcome, JavaScript user, i like web browser with JavaScript enabled!</h2>
</div>

</body>
</html>

Demo

Figure 1 : Web browser with JavaScript disabled.

javascript is disabled

Figure 2 : Web browser with JavaScript enabled.

javascript is enabled
Note
Many ask, how can i enable the JavaScript in client’s web browser? The answer is : there is no way to enable JavaScript without the client interaction, just forger about it.

Download Source Code

Download it – noscript-example.zip(1 KB)

About Author

author image
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

Subscribe
Notify of
11 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Ricardo Jesús de la Vega Cotarelo
4 years ago

You have to move “#main-content { display:none; }” to another within the HEAD section to get W3C Nu Html Checker successful validation.

Ricardo Jesús de la Vega Cotarelo
4 years ago

Simple, and brilliant!

SANKETIK
9 years ago

its nice.but i want to execute script which belongs to click button eg. addToCart button in Lambda tek site

Mike
10 years ago

This can be hacked with firebug in about 3 seconds. Dynamically change the id name of the div containing the “welcome js user..” and your “hidden” content appears.

Tom C.
10 years ago

Perfect solution. This is exactly what I was looking for. Thank you!

Gokul
11 years ago

Thanks for the script.

Mark
11 years ago

Just thought id add my own solution. I have javascript controlled divs and on a browser where javascript is disabled, none of these are shown…so:

1. Have a standard div in centre of page saying “please enable javascript to view or click here for non javascript page”

2. Set the z-value to -1

3. Have all javascript controlled divs set with a white/whatever background and a z-value of 0 or higher

The javascript controlled divs will cover the message if enabled, and show it if not.

Hope that this gives one or two of you a few ideas. Although this was specifically for my site, you may find that thinking out the box may help you too.

jaidev
12 years ago

Thanx for the script….i wanted to know, is there a way to automatically refresh the browser window or redirect, when the user disables javascript on arriving at a particular page which requires javascript ?

I m asking this because the above code only shows the disabled javascript note when the window is refreshed.

SANKETIK
9 years ago
Reply to  jaidev

I am also facing same problem

jaidev
12 years ago

Thanx for the script….i wanted to know, is there a way to automatically refresh the browser window or redirect, when the user disables javascript on arriving at a particular page which requires javascript ?

I m asking this because the above code only shows the disabled javascript note when the window is refreshed.

Skills2Earn
11 years ago
Reply to  jaidev

You can use meta redirect