数据结构
网络
关系数据库管理系统(RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法学如何隐藏不支持 JavaScript 的旧版浏览器中的 JavaScript 代码？
JavaScript 的 script 标签有时不被旧版浏览器识别。如果不被识别，它们只会忽略它，并将您的脚本显示为 (X)HTML 文档正文的一部分。为了防止这种情况发生，使用注释隐藏旧版浏览器中的脚本是一个明智的选择。
现在所有现代浏览器都支持 JavaScript；但是，早期浏览器不支持。在这篇文章中，我们将学习如何防止 JavaScript 代码在旧版浏览器中执行。
由于一些观众会在手机上查看网站，而另一些人则使用大型台式机屏幕，因此网站不可能在所有浏览器中看起来完全相同。同样，一些用户会使用过时的浏览器，而另一些用户则会使用最新的浏览器。一些用户可能会使用屏幕阅读器来收听信息，或者可能会放大以阅读。提供一个防御性构建的版本的内容，使其在现代浏览器上看起来很棒，但对于旧版浏览器的用户来说仍然可以在基本级别上使用，这就是“支持所有人”的概念。
策略 − 我们将使用单行 HTML 注释，在打开 <script> 标签后不使用结束符 (<!- )。之后，我们将创建 JavaScript 代码，该代码将对早期浏览器隐藏。在我们使用注释的结束符 (//-->) 之前，脚本将用 </script> 标签关闭。
语法
<script>
<!--
// Your JavaScript code
// that is hidden from older browser
console.log("Tutorials Point");
//-->
</script>
示例 1
在这个例子中，让我们了解一下，如果浏览器是支持 JavaScript 的浏览器，则背景颜色将更改为红色；否则，它将保持黄色。
<!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>
我们可以观察到，过时的浏览器会忽略 JavaScript 代码并将其视为 HTML 注释，而当前浏览器可以毫无问题地访问 JavaScript 代码。
当浏览器支持 JavaScript 时，显示橙色，如上例中添加的样式所示。
接下来，当浏览器不支持 JavaScript 时，显示绿色，如上例中添加的样式所示。
示例 2
对于支持 JavaScript 的浏览器，这种脚本隐藏方法也有效。脚本的第一行和最后一行用作其标题。客户端的 JavaScript 解释器知道 HTML 注释打开字符串，但是，将其视为单行注释处理。
因此，第二行在支持 JavaScript 的浏览器中被视为单行注释。类似地，您可以看到下面一行以单行注释字符串开头两次，因此支持 JavaScript 的浏览器也会跳过该行。现在只有第三到第五行继续作为 JavaScript 语句执行。
虽然需要一些时间来适应，但这 种简单而优雅的 HTML 和 JavaScript 注释组合实现了我们想要的目标，即防止不支持 JavaScript 的浏览器显示 JavaScript 代码。尽管现在需要它的浏览器越来越少，但在互联网上的 JavaScript 代码中仍然经常看到这种注释。
<!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>
浏览量 507 次
