【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元素

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