Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Hide JavaScript Code from Old Browsers
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. Some of your users may be using screen readers to hear your information read aloud to them or may have zoomed in to read it. 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>
Example 1
In this example let us understand, If the browser is one that supports JavaScript, the background colour will be changed to red; otherwise, it will remain yellow.
<!DOCTYPE html>
<html>
<title>How can JavaScript code be hidden from old browsers that do not support JavaScript - TutorialsPoint</title>
<head>
<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 remark, whereas a current browser can access JavaScript code without any issues.
Orange colour is displayed when JavaScript is supported by the browser, as style added in the example above.
Next, green colour is displayed when JavaScript is not supported by the browser, as style added in the example above.
Example 2
For browsers that do support JavaScript, this script-hiding approach also works. A script's first and last lines serve as its headings. JavaScript interpreters on the client side are aware of the HTML comment-opening string however, handle it like a single-line comment.
As a result, line two is viewed as a single-line comment in a browser that supports JavaScript. Similar you can see below line starts twice with the single-line comment string, therefore JavaScript-capable browsers also skip that line. Lines three through five are now the only ones that continue to be performed as JavaScript statements.
Although it takes some getting used to, this straightforward and classy combination of HTML and JavaScript comments achieves our desired goal of preventing JavaScript code from being displayed by browsers that do not support JavaScript. It is still rather common to see this kind of comments used in JavaScript code on the Internet, despite the fact that less and fewer browsers now demand it.
<!DOCTYPE html>
<html>
<title>How can JavaScript code be hidden from old browsers that do not support JavaScript - TutorialsPoint
</title>
<head>
<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 langauge="JavaScript">
<!-- start an HTML comment to hide the script
// Here are the JavaScript statements.
//
//
// close the HTML comment which hides the script -->
const date = new Date();
document.getElementById("result").innerHTML = (date);
</script>
</body>
</html>
570 Views
