Appearance
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 JavaScript in their browsers for security concerns. That’s why you need to make sure that your website will still work well even with JavaScript disabled.
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.
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:
message when js is disabled
html
<noscript>
The video can not be played because JavaScript is turned off.
</noscript>Here's the above code piece in action:
noscript code example
html
<!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 provides alternative content, which is displayed in browsers that don’t support scripts or where 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> tag. Here is how it looks like:
meta refresh code example
html
<noscript> <META HTTP-EQUIV="Refresh" CONTENT="0;URL=ShowErrorPage.html"> </noscript>The meta refresh method consists of an 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 a small value), meta refresh can be used as a method of URL redirection.
As shown in the code above, when JavaScript is disabled on that page, the browser gets redirected to ShowErrorPage.html, where it will show a warning message.