Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to find whether a browser supports JavaScript or not?
To find whether a browser supports JavaScript or not, use the <noscript> tag. The HTML <noscript> tag is used to handle browsers which recognize the <script> tag but do not support scripting. This tag displays an alternate message when JavaScript is disabled or unsupported.
Using the <noscript> Tag
The <noscript> element provides fallback content that displays only when JavaScript is unavailable. Content inside <noscript> is hidden when JavaScript is enabled.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Support Detection</title>
</head>
<body>
<script>
document.write("JavaScript is enabled and working!");
</script>
<noscript>
<p style="color: red; font-weight: bold;">
Your browser does not support JavaScript or it is disabled!
</p>
</noscript>
</body>
</html>
Modern Approach Using DOM Manipulation
A more modern approach avoids document.write() and uses DOM manipulation instead:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Detection</title>
</head>
<body>
<div id="js-status"></div>
<script>
document.getElementById('js-status').innerHTML =
'<p style="color: green;">? JavaScript is enabled!</p>';
</script>
<noscript>
<div id="no-js-message">
<p style="color: red;">? JavaScript is disabled or not supported.</p>
<p>Please enable JavaScript for full functionality.</p>
</div>
</noscript>
</body>
</html>
CSS-Based Detection
You can also use CSS classes to show/hide content based on JavaScript availability:
<!DOCTYPE html>
<html class="no-js">
<head>
<style>
.no-js .js-required { display: none; }
.js .no-js-message { display: none; }
</style>
</head>
<body>
<script>
document.documentElement.className = 'js';
</script>
<div class="js-required">
<p>This content requires JavaScript</p>
</div>
<div class="no-js-message">
<p>JavaScript is required for this website</p>
</div>
</body>
</html>
Key Points
- <noscript> content only displays when JavaScript is disabled or unsupported
- Modern browsers support JavaScript by default, but users can disable it
- Always provide meaningful fallback content for accessibility
- Consider progressive enhancement for better user experience
Conclusion
The <noscript> tag remains the standard method for detecting JavaScript support. Use it to provide fallback content and inform users when JavaScript is required for your application to function properly.
1K+ Views
