javascript 特徵偵測技術

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

這種新式的技術最先由jQuery搞出來的，接著Prototype與mootools都支援了。這技術興起的原因是瀏覽器嗅探技術是不太可靠，如UserAgent很容易被偽造，如IE8的UserAgent就把許多瀏覽器的關鍵字包含進去，造成辯識困難。其他一些重要辯識手段，由於瀏覽器廠商對舊版本的升級與不斷推進新版本，許多都無效了。由於瀏覽器種類越來越多，版本也越來越多，看看Ext的核心檔案吧，真是有耐性，連Firefox與蘋果的各個版本都列出來，這東西會沒有止境地膨脹，為此特徵偵測技術應運而生。這東西只要是用來偵測瀏覽器工廠自作聰明添加的一些特徵，不用說，首當其衝是IE，如自動為table添加tbody，自動為innerHTML去除空白，自動為href屬性補全路徑……雖然有的的確很有用，如為table添加tbody能加快讀寫速度，但標準瀏覽器不這樣做，於是麻煩又來了……

innerHTML去除空白特性。按理講，innerHTML是IE搞出來的，其他瀏覽器應該完全按照IE的模式渲染才對不起，但它們總要搞出一點特殊來。不過，IE的innerHTML的確有不妥的地方。按微軟的思路，innerHTML是用來大規模產生DOM元素，如果有一些空白不是包圍在標籤之內，將會被忽略掉。這是很細心的處理。但標準瀏覽器則認為innerHTML產生的是頁面的一部分，空白也是，因此空白不會被忽略的。注意運行框的結果，1代表元素節點，3是文本節點，空白也是文本節點的一種。這種特徵，jQuery稱之為leadingWhitespace。

<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <title>特徵偵測技術 By 司徒正美</title> <script type="text/javascript"> window.onload = function(){ var p = document.getElementById("p"); p.innerHTML = " 你好！" alert(p.firstChild.nodeType); } </script> </head> <body> </body> </html>

運行代碼

table自動插入tbody。在表格版面配置的年代，這特徵非常受用的。因為如果沒有tbody，table會在瀏覽器解析到閉合標籤時才顯示出來，如果起始標籤與閉合標籤相隔很完，換言之，這表格很大很長，使用者會看什麼也看不到。但有了tbody分段識別和顯示，避免了頁面長時間一片空白然後突然一下子內容全部出來的局面。不過，這隻因為IE渲染速度太慢的緣故，看看人家的opera與chrome……此特徵，jQuery就叫tbody，囧！

<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=7"> <title>特徵偵測技術 By 司徒正美</title> <script type="text/javascript"> window.onload = function(){ var div = document.createElement("div"); div.innerHTML = "<table></table>" document.body.appendChild(div); alert(div.getElementsByTagName("tbody").length,) } </script> </head> <body> </body> </html>

運行代碼

object的子項目不可見特性。也就是說，雖然成功渲染了，但我們無法擷取裡面的這些東西，真是撞鬼了。如果做flash，要臨時改動一下參數……此特徵，jQuery稱之為objectAll。

<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=7"> <title>特徵偵測技術 By 司徒正美</title> <script type="text/javascript"> window.onload = function(){ var div = document.createElement("div"); div.innerHTML = "<object><param/><param/><param/></object>" document.body.appendChild(div); alert(div.getElementsByTagName("object")[0].children.length) alert(document.getElementsByTagName("param")[0]) } </script> </head> <body> </body> </html>

運行代碼

innerHTML序列化html字串特性。通常我們用innerHTML把一個符合html標籤格子的字串轉換為DOM元素，此過程jQuery稱之為序列化，但這序列化在IE中是不完整的，不能序列化為link元素。因此不要用innerHTML動態載入CSS檔案。此特徵在jQuery的名字叫htmlSerialize。

<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <title>特徵偵測技術 By 司徒正美</title> <script type="text/javascript"> window.onload = function(){ var div = document.createElement("div"); div.innerHTML = '<link href="http://www.cnblogs.com/Skins/marvin2/brown.css" rel="stylesheet" type="text/css" /> '; document.body.appendChild(div); alert(div.getElementsByTagName("link").length) } </script> </head> <body> <h1 id="top">司徒正美的部落格Ruby Louvre</h1> <h3 id="tagline">如果網頁不是純白色，證明已成功載入我部落格的主題！</h3> </body> </html>

運行代碼

最新發現（2009,12,11），IE也並不是不支援link元素的序列化，而是存在一些bug。見下面測試

<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8" /> <title> innerHTML bug By 司徒正美 </title> <script type="text/javascript"> window.onload = function() { var div = document.createElement('div'); div.innerHTML = '<link>'; alert(div.innerHTML); // => '' div.innerHTML = '<div><link></div>'; alert(div.innerHTML); // => '<div></div>' div.innerHTML = '<div><link></div>text'; alert(div.innerHTML); // => '<div></div>text' div.innerHTML = 'text<link>' alert(div.innerHTML); // => 'text<link>' } </script> </head> <body> <h1 id="top"> 司徒正美的部落格Ruby Louvre </h1> <h3 id="tagline"> 如果網頁不是純白色，證明已成功載入我部落格的主題！ </h3> </body></html>

運行代碼

getAttribute對style支援特性。IE會獲得一個對象，其他則獲得一個字串……至於setAttribue的情況可見我另一篇博文。此特徵在jQuery稱之為style，真是莫名其妙的命名啊！

<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <title>特徵偵測技術 By 司徒正美</title> <script type="text/javascript"> window.onload = function(){ var div = document.createElement("div"); div.innerHTML = '<a href="/a" style="color:red;">司徒正美</a>'; document.body.appendChild(div); var a = div.getElementsByTagName("a")[0]; alert(a.getAttribute("style")) } </script> </head> <body> </body> </html>

運行代碼

自動補全url特性。IE會把img的src,a的href,form的action全部補全為絕對路徑，此bug可以用getAttribute的第二個參數搞定。此特徵在jQuery稱之為hrefNormalized。

<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <title>特徵偵測技術 By 司徒正美</title> <meta http-equiv="X-UA-Compatible" content="IE=7"> <script type="text/javascript"> window.onload = function(){ var a = document.getElementsByTagName("a")[0]; var img = document.getElementsByTagName("img")[0]; var form = document.getElementsByTagName("form")[0]; alert("連結的href屬性為 "+ a.getAttribute("href")) alert("圖片的src屬性為 "+ img.getAttribute("src")) alert("表單的action屬性為 "+ form.getAttribute("action")) } </script> </head> <body> <a href="/rubylouvre">司徒正美</a> <img src="/205314/o_iebug.jpg" /> <form action="/rubylouvre"></form> </body> </html>

運行代碼

動態解析指令碼特性。在標準瀏覽器中，如果為script添加文本節點，它會把裡面的內容解析為指令碼，IE則不行，要依賴其text屬性，詳見我另一篇博文《javascript 動態解析指令碼》。此特性，jQuery稱之為scriptEval。

<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <title>特徵偵測技術 By 司徒正美</title> <script type="text/javascript"> window.onload = function(){ var script = document.createElement("script"); script.type = "text/javascript"; try { script.appendChild( document.createTextNode( "window.rubylouvre=100" ) ); } catch(e){} document.body.appendChild( script ); if ( window.rubylouvre ) { alert( window.rubylouvre ) delete window.rubylouvre; } document.body.removeChild( script ); } </script> </head> <body> </body> </html>

運行代碼

複製事件特性，指用cloneNode方法複製節點時，會連它上面的事件也複製了。jQuery稱之為noCloneEvent。

<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <title>特徵偵測技術 By 司徒正美</title> <script type="text/javascript"> window.onload = function(){ var addEvent = (function () { if (document.addEventListener) { return function (el, type, fn) { el.addEventListener(type, fn, false); }; } else { return function (el, type, fn) { el.attachEvent('on' + type, function () { return fn.call(el, window.event); }); } } })(); var div1 = document.createElement("div"); div1.style.cssText = "width:200px;height:200px;background:blue"; div1.innerHTML = "點我！" document.body.appendChild(div1); addEvent(div1,"click",function(){ alert("這是div1的事件！") }); var div2 = div1.cloneNode(true); div2.style.backgroundColor = "red"; document.body.appendChild(div2); } </script> </head> <body> </body> </html>

運行代碼

盒子模型特性，IE在不同的渲染模式下，盒子模型是不同的。標準的盒子模型，元素的總寬度等於=左邊界+左邊框+左補白+寬+右補白+右邊框+右邊界。怪異模式下，元素的總寬度=左邊界+寬+右邊界。換言之，怪異模式下，其寬會少一點。我們可以用offsetWidth來驗證，offsetWidth的定義可由解釋得一清二楚！jQuery稱之為boxModel。

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>特徵偵測技術 By 司徒正美</title> <script type="text/javascript"> window.onload = function(){ var div = document.createElement("div"); div.style.width = div.style.paddingLeft = "1px"; document.body.appendChild( div ); alert(div.offsetWidth) } </script> </head> <body> </body> </html>

運行代碼

其他兩種cssStyle與opacity就不詳說了，IE下都有代替品。在Prototype還檢測瀏覽器對XPath，SelectorsAPI，Element，Element.prototype的支援，innerHTML在select、col、colgroup、frameset、html、title、style、table、tbody、thead、tfoot、tr、td、th中的讀寫情況。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More