幾個JavaScript的瀏覽器差異處理問題

JQuery確實是個很好用的庫，你可以不用考慮很多細節方面的事情。但很作為一個web前端，處理和瞭解瀏覽器差異一個重要問題。下面將介紹一些總結，先介紹沒有使用js庫的情況。

1. setAttribute方法設定元素類名

在jQuery中，直接使用attr()方法即可，可在原生的JS中，

//這個是W3C的標準，在相容W3C標準的瀏覽器中有效，可是，IE才是國內使用者的主旋律element.setAttribute('class','newClassName') //這樣的設定在IE中才能有效element.setAttribute('className','newClassName') //所有瀏覽器有效(只要支援javascript)element.className = 'newClassName' 

好了，開篇說完了，這篇文章的目的也就是介紹瀏覽器差異的同時使前端的朋友們瞭解如果用最有效方法去解決問題，下面繼續。

2. FireFox沒有window.event對象

FireFox沒有window.event對象，只有event對象,IE裡只支援window.event,而其他主流瀏覽器兩者都支援,所以一般寫成：

function handle(e){e = e || event;...}

3. DOMContentLoaded事件原理

對window.onload事件是當頁面解析/DOM樹建立完成，並完成了片、指令碼、樣式表等所有資源的下載後才觸發的。這對於很多實際的應用而言有點太"遲"了，比較影響使用者體驗。為瞭解決這個問題，FF中便增加了一個DOMContentLoaded方法，與onload相比，該方法觸發的時間更早，它是在頁面的DOM內容載入完成後即觸發，而無需等待其他資源的載入(這個也就是jquery.ready()事件的實現原理)。

//以下是jQuery 1.4.2版本的原版分析bindReady: function() {　　if ( readyBound ) {　　　　return;　　}　　readyBound = true;　　// Catch cases where $(document).ready() is called after the　　// browser event has already occurred.　　if ( document.readyState === "complete" ) {　　　　return jQuery.ready();　　}　　// Mozilla, Opera and webkit nightlies currently support this event　　if ( document.addEventListener ) {　　// Use the handy event callback　　　　document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );　　　　// A fallback to window.onload, that will always work　　　　window.addEventListener( "load", jQuery.ready, false );　　　　// If IE event model is used　　} else if ( document.attachEvent ) {　　　　// ensure firing before onload,　　　　// maybe late but safe also for iframes　　　　document.attachEvent("onreadystatechange", DOMContentLoaded);　　　　// A fallback to window.onload, that will always work　　　　window.attachEvent( "onload", jQuery.ready );　　　　// If IE and not a frame　　　　// continually check to see if the document is ready　　　　var toplevel = false;　　　　try {　　　　　　toplevel = window.frameElement == null;　　　　} catch(e) {}　　　　if ( document.documentElement.doScroll && toplevel ) {　　　　　　doScrollCheck();　　　　}　　}}

設計思路 - 將Webkit與Firefox同等對待，都是直接註冊DOMContentLoaded事件，但是由於Webkit是在525以上版本才引入的，因此存在相容性的隱患。 對於IE，首先註冊document的onreadystatechange事件，經測試，該方式與window.onload相當，依然會等到所有資源下載完畢後才觸發。 之後，判斷如果是IE並且頁面不在iframe當中，則通過setTiemout來不斷的調用documentElement的doScroll方法，直到調用成功則出觸發DOMContentLoaded。1 jQuery對於IE的解決方案的原理是，在IE下，DOM的某些方法只有在DOM解析完成後才可以調用，doScroll就是這樣一個方法，反過來當能調用doScroll的時候即是DOM解析完成之時，與prototype中的document.write相比，該方案可以解決頁面有iframe時失效的問題。此外，jQuery似乎擔心當頁面處於iframe中時，該方法會失效，因此實現代碼中做了判斷，如果是在iframe中則通過document的onreadystatechange來實現，否則通過doScroll來實現。不過經測試，即使是在iframe中，doScroll依然有效。

4. 學會使用IE的條件注釋

許多前端總是在抱怨萬惡的IE,確實,處理相容性的問題確實會越來越噁心,可是沒有辦法,既然沒有辦法改變,那麼請享受...

<!--[if IE]><h1>您正在使用IE瀏覽器</h1><![endif]--><!--[if IE 5]><h1>版本 5</h1><![endif]--><!--[if IE 5.0]><h1>版本 5.0</h1><![endif]--><!--[if IE 5.5]><h1>版本 5.5</h1><![endif]--><!--[if IE 6]><h1>版本 6</h1><![endif]--><!--[if IE 7]><h1>版本 7</h1><![endif]-->

先總結到這裡吧，希望能對新手或者有需要的人有所協助。