【JS】关于《应用注释符号验证浏览器是否支持 JavaScript 脚本功能》的一些思考

如果用户不能确定浏览器是否支持JavaScript脚本,那么可以应用HTML提供的注释符号进行验证。HTML注释符号是以 <-- 开始以 --> 结束的。如果在此注释符号内编写 JavaScrip t脚本,对于不支持 JavaScript 的浏览器,将会把编写的 JavaScript 脚本作为注释处理。

使用 JavaScript 脚本在页面中输出一个字符串,将 JavaScript 脚本编写在 HTML 注释中,如果浏览器支持 JavaScript 将输出此字符串,如果不支持将不输出此字符串,代码如下:

<script>
<!--
document.write("您的浏览器支持JavaScript脚本!");
//-->
</script>

注意:注释行结尾处的两条斜杠 // 是 JavaScript 注释符号。这可以避免 JavaScript 执行 --> 标签。

代码来源:https://www.runoob.com/js/js-comments.html

 

首先,探讨一下:应用注释符号验证浏览器是否支持 JavaScript 脚本功能

官方的解释是:利用<!--//-->主要是为了防止某些浏览器不支持 javascript,导致 javascript 的代码直接出现在页面上,影响美观。

因此,用 HTML 的注释把 javascript 的代码包括起来,如果浏览器不支持 javascript,那么也会当做注释处理。尽管 javascript 失效了,但不至于把源代码显示在页面上。

(有些浏览器可能支持 javascript,但也提供用户一个开关,关闭 javascript,如果用户关闭了javascript的功能,也会这样)

 

然后,老陌对于 <!-- 产生了深深的疑惑……我有些不太明白,<!--不是jsp里面的注释方法吗?js肯定不能识别!所以我以为这段代码要么提示编译出错,要么就把<!--原模原样地输出来。

为了验证这个观点,我在桌面上创建了一个TXT文档,然后把上述代码输入了进去,改了个后辍名再打开我的360浏览器,结果发现它居然正儿八经地输出来了?!有图为证:

源代码

360浏览器运行效果

这个结果让我有点奇怪,哪里冒出来的body?自动加进去的?众所周知,<body> 元素在html里面主要是包含了那些可见的页面内容,也就是说,这里显示出来的一串汉字其实是由<body></body>里面的内容,和<head></head>里面的js代码并没有直接的关系。

难道html里面有这样默认的规则吗?Web浏览器(如谷歌浏览器,Internet Explorer,Firefox,Safari)在读取HTML文件的过程中,会自动补全<html><body>这些必备的标签?换言之,如果没有这些标签,HTML页面展现出来的效果是不是就会有所不同?毕竟浏览器并不是直接显示的HTML标签,而是使用标签来决定如何展现HTML页面的内容给用户的。

老陌除此之外还有一个疑惑的地方,那就是从<!--这个标签的角度出发,是用jsp里面的注释来理解:<%-- --%>标记的内容是完全看不到的,而<!--  --> 标记的内容不但可以看到,还会自动发布到客户端,并且里面的内容还会被解析,所以在浏览器上可以查看页面源代码。但这个标签还缺了一半吧?难道支持javascript的浏览器都有这个自动补全的机制?老陌决定用谷歌和IE浏览器试试:

谷歌浏览器运行结果

IE浏览器运行效果

360运行结果

google chrome 运行结果

IE运行结果

由此,老陌得出了一个结论:html会自动生成<html><head><body>等标签, <!-- 和 --> 在html里面不会被当成普通的字符输出来

这个结论老陌用dreamweaver中的“实时代码”反证了一下:

DW中的实时代码1

DW中的实时代码2

DW验证结果

到这里老陌似乎找到了自己想要的答案,后来也从资料中找到了比较正规的解释:除了在源文档中有非常明显的作用外,许多 Web 服务器也利用注释来实现文档服务端软件特有的特性。这些服务器可以扫描文档,从传统的 HTML/XHTML 注释中找到特定的字符序列,然后再根据嵌在注释中的命令采取相应的动作。这些动作可能是简单的包括其他文件中的文本(即所谓的服务器端包含,server-inside include),也可能是复杂地执行其他命令去动态生成文档的内容。

可是, <!-- 在这里为什么会被默认成“灰色”(注释)呢?我记得在部分浏览器中即使没有关闭标签也能正常显示,这是因为关闭标签是可选的。但是当年学习时老师一再强调不要依赖这种做法,因为忘记使用结束标签会产生不可预料的结果或错误。所以用这种不可预料的理论来解释的话,是否有了一定的说服力?

又或者说<!--在这里可以理解成类似空元素的一样的标签:没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。所以上述情况与html的空标签有着异曲同工的效果?

老陌对此想不出更好的解释了 ,希望在以后的学习中可以找到更具说服力的解释。

 

参考资料:

HTML <!--...--> 注释标签

浅谈HTML空标签 

HTML的空标签

HTML元素

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章