How to Display a Message if JavaScript is Turned Off

Many websites depend on JavaScript to function well. Your site may not be accessible if it is turned off. However, many users disable the JavaScript on their browsers for security concern. That’s why you need to make sure that your website will still work well even with JavaScript disabled. Besides, all validation must be duplicated on both client and server-side so you can catch things in case the JavaScript is turned off.

If you have content that will not function without JavaScript, you need to display a message with an explanation of the problem. In this snippet, we are going to have a look at 2 simple methods to display the content when JavaScript is turned off.

Watch a course JavaScript -The Complete Guide (Beginner + Advanced)

HTML <noscript> tag

When JavaScript is disabled, you can use the <noscript> tag to display a warning message and hide the entire content with CSS. It looks like this:

<noscript>
The video can not be played because Javascript is turned off.
</noscript>

Here's the above code piece in action:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <script>
      document.write("Welcome to W3Docs")
    </script>
    <noscript>
      Your browser doesn't support JavaScript
    </noscript>
  </body>
</html>

HTML <noscript> tag has an alternative content, which is displayed in the browsers, that don’t support scripts, or the browsers, where the script support is disabled by the user. In other cases, the browser ignores this tag and its content.

The meta refresh Method

Many developers suggest another method to display the content when JavaScript is turned off. You need to redirect to a page, where you can show the message that JavaScript is turned off. In order to do that, you can use the <noscript> method. Here is how it looks like:

<noscript> <META HTTP-EQUIV="Refresh" CONTENT="0;URL=ShowErrorPage.html"> </noscript>

The meta refresh method consists of HTML <meta> tag with the http-equiv parameter set to "refresh" and a content parameter giving the time interval in seconds, so this will redirect the user to another page in the interval specified in that header. By setting the refresh time interval to zero (or little value), meta refresh can be used as a method of URL redirection.

As you see in the code above, the JavaScript is disabled in that page, the browser gets redirected to “ShowErrorPage.html”, where it will show a warning message.