JavaScript字符串中带有HTML注释的怪异行为

Question

我有以下HTML代码：

<script>
function x(){
    	test1 = '<script><!--';
    	test2 = '<script>';
    }
    alert(1);
</script>
<script>
alert(2);
</script>

[预期输出是它会弹出两个警报：alert(1)和alert(2)，但是，似乎<!--注释使浏览器实际上注释掉了关闭的</script>标记，这没有任何意义！当我在控制台中运行document.getElementsByTagName("script")[0].text时，我得到：

function x(){
        test1 = '<script><!--';
        test2 = '<script>';
    }
    alert(1);
</script>
<script>
alert(2);
</script>

是否有对此怪异行为的解释？

谢谢！

Answer 1

历史上（超过20年前），程序员可以将脚本代码包装在脚本元素内的HTML注释标签中，以防止不支持脚本标签的浏览器在页面正文中显示脚本文本。您仍然可以将脚本放在HTML注释中：

<!--
alert(" inside an HTML comment")
-->

HTML解析器还负责查找脚本结束标记</script>，因此它可以将HTML元素的文本内容传递给Javascript引擎以进行语言解析。因此，在不结束脚本块的情况下，不能在JavaScript内容（字符串或注释）中放入未转义的“”，HTML解析器首先查看文本。

HTML living standard列出了有关如何避免问题的一些建议：

避免本节中描述的相当奇怪的限制的最简单，最安全的方法是，始终将ASCII不区分大小写的匹配项“

实际上，我发现开放标记在JavaScript中是可以接受的，因为HTML解析器正在寻找结束脚本标记，但是如果它不能在所有浏览器中都起作用，我没有理由抱怨。

因此，建议的解决方案是在JavaScript代码中反斜杠转义HTML注释定界符。更有趣的是，如果您关闭注释中的HTML注释，它也可以工作-代码按书面形式工作：

<script>
function x(){
        test1 = '<script><!--'; // --> close HTML comment
        test2 = '<script>';
    }
    alert(1);
</script>
但是这符合我的定义，我建议按照标准中的建议转义注释定界符。

Answer 2

您的浏览器将您的html解析为DOM树，只有在此之后，您的JavaScript代码才会运行。首先，您会对脚本中包含的html注释进行解析，并进行同样的处理，只有在此之后，浏览器才会运行相关的脚本（如果有）。