如何隐藏不支持 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>

更新于：2022年12月9日

浏览量 507 次

启动您的职业生涯

完成课程获得认证

开始
广告