Many users are wary of enabling JavaScript support for sites because they don’t want to download a virus or have other bad things happen to their systems. In addition, people have become less receptive to using scripts because they sometimes do things the user doesn’t want, such as grab the user’s identity. When a user enables JavaScript for your application, it represents a trust relationship between the user and you.
Of course, the user needs to know that your site requires JavaScript in order to enable it. Consider these two options:
Use the
The tag is a special tag that the browser reacts to when scripting support isn’t available on the local system. This is a standard tag that every browser currently on the market should support, so it represents the safest and most reliable way to tell a user that your site requires JavaScript support.
However, some people have complained that the tag can also cause some unwanted effects with some devices, such as flickering on smartphones. If you receive user complaints about this issue, you may have to resort to the next technique, even though it’s less reliable.
<!DOCTYPE html>
<html>
<head>
<title>Using the NoScript Tag</title>
</head>
<body>
<h1>Using the NoScript Tag</h1>
<noscript>
<p>Please enable JavaScript to use this page!</p>
</noscript>
<script language="JavaScript">
document.write(
"<p>You have JavaScript enabled!</p>");
</script>
</body>
</html>
This approach is quite simple. When you try the example, you see one of two messages. If you have JavaScript enabled, you see “You have JavaScript enabled!” Otherwise, you see “Please enable JavaScript to use this page!” Try disabling JavaScript support in your browser and refreshing this page to see the alternative message.
Use styles for JavaScript alert
The styles approach relies on the use of Cascading Style Sheets (CSS) to create a condition where a message is displayed when scripting is disabled. The problem with this approach is that not every browser supports it. Yes, newer browsers do support this technique just fine, but if you encounter users with older browsers, your application could experience problems. The following example shows how to use this technique.
<!DOCTYPE html>
<html>
<head>
<title>Using Styles</title>
<script language="JavaScript">
document.write(
'<style>#NoJS { display: none; }</style>');
</script>
</head>
<body>
<h1>Using Styles</h1>
<p id="NoJS">
Please enable JavaScript to use this page!
</p>
<script language="JavaScript">
document.write(
"<p>You have JavaScript enabled!</p>");
</script>
</body>
</html>
This technique relies on a simple trick. When scripting is enabled, the first script creates a style for the first tag that hides the information in that paragraph by adding the display: none style. The presence of scripting support also lets the second script run, which displays the “You have JavaScript enabled!” message.
When scripting is disabled, the first script can’t run, so there’s no special style for the tag with an id of NoJS. This means that the “Please enable JavaScript to use this page!” message is displayed. However, because there’s no scripting support, the second script also fails, which means you won’t see the JavaScript-enabled message. Try this example by enabling, then disabling, JavaScript support on your browser.
