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 can JavaScript code be hidden from old browsers that do not support JavaScript?
The JavaScript script tag is occasionally not understood by older browsers. If not, they will simply disregard it and display your script as though it were a section of the (X)HTML document's body. It's a smart option to use comments to hide scripts from outdated browsers to prevent it from happening.
JavaScript is now supported by all modern browsers; however, earlier browsers did not. In this article, we'll learn how to prevent JavaScript code from executing in older browsers.
As some of your viewers will be seeing the site on a phone while others are using a large desktop screen, it is impossible for a website to look exactly the same in all browsers. Likewise, a few of your users will be using an outdated browser, while others will be using the most recent one. Providing a version of your content that is defensively built to look excellent on modern browsers but still be useable at a basic level for users of outdated browsers is the concept of "supporting everyone."
Strategy ? We are going to utilise a single-line HTML comment without a closing character (<!--) after the <script> tag has been opened. After that, we will create the JavaScript code which will be hidden from earlier browsers. The script will be closed with the </script> tag before we use the closing character with comment (//-->).
Syntax
<script>
<!--
// Your JavaScript code
// that is hidden from older browser
console.log("Tutorials Point");
//-->
</script>
How It Works
The HTML comment syntax <!-- tells old browsers to ignore everything until they see -->. JavaScript-enabled browsers recognize this pattern and treat the <!-- as a single-line comment, allowing the JavaScript code to execute normally while the closing //--> is also treated as a JavaScript comment.
Example 1: Background Color Change
In this example, if the browser supports JavaScript, the background colour will be changed to orange; otherwise, it will remain green.
<!DOCTYPE html>
<html>
<head>
<title>How can JavaScript code be hidden from old browsers - TutorialsPoint</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body bgcolor="green">
<h1 style="text-align: center; font-size: 3rem;">
Learn JavaScript with TutorialsPoint!
</h1>
<script type="text/javascript">
<!--
document.bgColor = "orange";
//-->
</script>
</body>
</html>
We can observe that an outdated browser will ignore JavaScript code and treat it like an HTML comment, whereas a current browser can access JavaScript code without any issues.
Orange colour is displayed when JavaScript is supported by the browser, as shown in the example above. Green colour is displayed when JavaScript is not supported by the browser.
Example 2: Date Display with Comment Structure
For browsers that do support JavaScript, this script-hiding approach also works effectively. The JavaScript interpreter recognizes the HTML comment-opening string but handles it like a single-line comment.
<!DOCTYPE html>
<html>
<head>
<title>How can JavaScript code be hidden from old browsers - TutorialsPoint</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
<h2>Visit TutorialsPoint!</h2>
<div id="result"></div>
<script language="JavaScript">
<!-- start an HTML comment to hide the script
// Here are the JavaScript statements
const date = new Date();
document.getElementById("result").innerHTML = date;
// close the HTML comment which hides the script -->
</script>
</body>
</html>
Browser Compatibility
| Browser Type | Behavior | Result |
|---|---|---|
| Old browsers (no JS support) | Treats code as HTML comment | Ignores JavaScript completely |
| Modern browsers | Executes JavaScript normally | Runs the script as intended |
Key Points
- The
<!--comment hides JavaScript from old browsers - JavaScript-enabled browsers treat
<!--as a single-line comment - The closing
//-->is also treated as a JavaScript comment - This technique is rarely needed today but still found in legacy code
Conclusion
While this HTML comment technique was essential for older browsers, it's rarely needed today since virtually all browsers support JavaScript. However, understanding this pattern helps when working with legacy code and demonstrates graceful degradation principles.
683 Views
