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

问题描述 投票:2回答:1

我有以下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>

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

谢谢!

javascript html
1个回答
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>

但是这符合我的定义,我建议按照标准中的建议转义注释定界符。


-1
投票

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

热门问题
推荐问题
最新问题