使用 HTML 注释标签  仍然与 JavaScript 代码相关吗？答案

【问题标题】：Using HTML comment tag  still relevant around JavaScript code?使用 HTML 注释标签  仍然与 JavaScript 代码相关吗？
【发布时间】：2010-12-03 05:41:37
【问题描述】：

在 JavaScript 代码周围使用 HTML 注释标记是否仍然相关？

我是说

<html>
    <body>
        <script type="text/javascript">
            //<!--
            document.write("Hello World!");
            //-->
        </script>
    </body>
</html>

【问题讨论】：

请考虑在浏览器旁边使用 JavaScript。同时排除非常旧的浏览器。

标签： javascript browser

【解决方案1】：

并非如此，除非您的目标是 20 岁的浏览器。

【讨论】：

不，Internet Explorer 2。Netscape 从 2.0 开始支持 Javascript
@kangax：比这更糟糕——如果我没记错的话是 Netscape Navigator 2。

【解决方案2】：

最好避免在正文中使用 JavaScript。它使更新变得更容易，避免了对 cmets 的需求，并迫使您为未启用 JavaScript 的用户以及启用 JavaScript 的用户进行规划。

【讨论】：

有时您的所有 javascript 都在 .js 文件中而不是在 HTML 中，这使得更新变得更困难，因为.js 文件可能会被缓存。
我从一个文件夹中链接我的 javascript 文件，该文件夹的名称是我的 Web 应用程序的当前版本。
许多网站和框架（例如wordpress）的另一个常见策略是在js文件URI中添加查询字符串，以便在查询字符串更改时强制文件重新加载。例如：<script type="text/javascript" src="http://example.com/path/to/file.js?v1.0"></script>

【解决方案3】：

HTML cmets，即。 ，不再需要。它们旨在允许不理解 <script> 标签的浏览器优雅地降级。这些浏览器，例如。 Netscape 1.x 不再流行。所以再把 HTML cmets 放在你的脚本标签中真的没有意义了。

如果您希望您的 HTML 验证为 XHTML 或 XML，您可能需要使用注释掉的 CDATA 标记。


<script type="text/javascript">
//<![CDATA[
document.write("Hello World!");
//]]>
</script>

这样做的原因是您的 javascript 代码中的 &lt;、>、&amp;、" 和 ' 不必编码为 &lt;、@987654331 @、&amp;、&quot; 和 &apos;。

【讨论】：

当你想将']]>'作为字符串的一部分时你会怎么做？
@dreamlax：你必须把它分成几块。人们对</script> 也有同样的问题，通常会分为</scr 和ipt>。
实际上在今天仍然在 js 代码周围使用 html cmets 可能是有道理的。 Googlebot 将抓取在 js 代码中找到的任何“看起来像 url”（根据我不知道什么标准）的字符串，就好像它是一个链接一样。我知道这完全是痴呆症，但确实如此。在许多情况下，您可能拥有看起来像 url 但不是有效 url 的字符串，因此您不希望 Google 的爬虫用无意义的请求来烦扰您的服务器。如果 js 代码包含在 html cmets 中，某个似乎知道他说什么的人会确保 googlebot 不会抓取看起来像 url 的 js 字符串。 goo.gl/ZRW1Y 没试过
@dreamlax ]]>]]<![CDATA[> ☺
如果目标是让 HTML/XML 验证器更容易理解（现在很多人都正确理解了 <script> 的内容），那么我看不到 CDATA 块在传统注释之上的显着优势。唯一的区别是<script> 是否正式有内容 - 而对于搜索引擎，我们可能希望它没有内容......

【解决方案4】：

不是你这样做的方式，不。

【解决方案5】：

即使在现代浏览器中，它也很有用。我今天实际上遇到了这个问题，正是因为我想避免在我的 html 中嵌入 javascript。

我有一个在http://host/variable_app_name/pagename 上提供的html 页面，其中variable_app_name 可以有很多值（你知道，变量）。如果它想访问静态文件，它必须使用像 http://host/static/variable_app_name/filename 这样的 url，所以如果不先查看浏览器的位置以找到 variable_app_name 的值，我就无法指定静态文件位置。

要链接到主 javascript 文件，我执行以下操作：

<script type="text/javascript" >
   var variable_app_name = window.location.pathname.split('/')[1];
   document.write('<script type="text/javascript" src="/static/'+variable_app_name+'/pagename.js"></script>\n');
</script>

即使在最新版本的 Chrome 中，上面的代码也会爆炸，因为脚本标签会在一个 javascript 字符串的中间终止，而字符串的其余部分将被解释为 html，如下所示：

<script type="text/javascript" >
   var variable_app_name = window.location.pathname.split('/')[1];
   document.write('<script type="text/javascript" src="/static/'+variable_app_name+'/pagename.js">
</script>
\n');
</script>

有很多方法可以解决这个问题，但我喜欢使用 html 注释。

带有html注释：

<script type="text/javascript" >
<!--
   var variable_app_name = window.location.pathname.split('/')[1];
   document.write('<script type="text/javascript" src="/static/'+variable_app_name+'/pagename.js"></script>\n');
-->
</script>

分解javascript字符串：

<script type="text/javascript" >
   var variable_app_name = window.location.pathname.split('/')[1];
   document.write('<script type="text/javascript" src="/static/'+variable_app_name+'/pagename.js"></scr'+'ipt>\n');
</script>

创建并附加脚本标签而不是使用 document.write：

<script type="text/javascript" >
   var variable_app_name = window.location.pathname.split('/')[1];
   var script = document.createElement('script');
   script.type = 'text/javascript';
   script.src = '/static/'+variable_app_name+'/pagename.js';
   document.head.appendChild(script);
</script>

我喜欢使用 html 注释，因为它是一个简洁的更改，不需要为每个链接文件复制或考虑。

【讨论】：