IE 踩坑記

目前咱們兼容到IE9,在寫系統的時候會遇到一些坑。這裏稍稍記錄一下。

• disabled屬性

給一些非表單節點加上了disabled屬性，在IE9下，樣式也會發生變化。

• type屬性

經常順手給dom節點，好比按鈕上加一個type="1",type="2"這樣子，在chrome下運行得好好的，結果到ie9下面getAttribute('type')或$(..).attr('type')運行不正常，調試發現讀出來的type都是'submit'。

• event = window.event || event

最近跟蹤一個bug，event中的某些屬性讀取不到，發現問題出在這句代碼上。當代碼執行過去以後，window.event可能已經變了。
因此應該改寫成:event || window.event。

這種的選擇判斷，理論上都應該以高級優先原則。 先看看功能強大 的存不存在，而後再考慮低級一點的。 由於有些瀏覽器多是高級與低級並存的。
好比document.addEventListener與document.attachEvent。

• console

之前遇到IE9下面系統沒法運行，可是打開控制檯想要調試一下，看看問題在哪，居又能正常運行，這還怎麼玩？ 後來發如今IE9,8下面，有時候不打開控制檯，console對象是不存在的，那麼調用console.log就會報錯致使js運行不下去，而一打開控制檯console對象就存在了，又看不到bug所在了。

這個時候咱們可能須要，不打開控制檯的調試方法：github.com/liusaint/Ja…

另外線上環境儘可能不要console.log東西出來。可考慮將原生console.log封裝一下：

function log(){
    if('dev' == window.environment){
        console.log.apply(console,arguments);
    }    
}
log(1,2);//1,2複製代碼

這樣正式環境也不會有輸出。另外，爲了預防其餘同事潛在的console.log輸出。能夠增長如下保險代碼。固然，實際可能還有console下面的其它方法也要作處理。

if(!window.console){
    window.console = {};
    window.console.log = function(){

    }
}複製代碼

• IE9不支持flex

• IE9不支持FileReader

• a標籤觸發onbeforeunload事件

這個狀況也不是經常會出現，要看機率。咱們的a標籤即便加了javascript:void:(0)也觸發了window.onbeforeunload事件，然而頁面其實並不會跳轉。
通常考慮解決辦法是給全部的a標籤代理一下，檢測到href爲javascript時，阻止默認事件，event.preventdefault();可是實際並非麼有效果，特別是後面添加上去的a標籤。好比生成的ajax分頁的a標籤，連jQuery的on方法代理都沒什麼效果。只有每次生成分頁的a標籤後都給它們單獨綁一個click事件來阻止默認操做event.preventdefault();

• IE9 canvas跨域問題 如：canvas.toDataURL()

咱們經常會遇到圖片所在的域跟網頁的域不同的狀況。那麼使用canvas的一些方法提取編輯過的圖片數據的時候就會遇到跨域的問題。好比canvas的toDataURL()方法。其餘瀏覽器能夠經過服務器配置CORS跨域加上 img.crossOrigin="anonymous"來解決問題，但IE9不行， 因此一些功能在IE9下面就須要後端來作，好比圖片的旋轉，在IE9下仍是乖乖地傳個角度給後端吧。或者在IE9下面直接捨棄部分功能。

• localStorage 深坑

說出來你可能不信，localStorage在IE偶爾抽風的狀況下會出現，兩個標籤頁，徹底同樣的網址，讀出來的localStorage不同的狀況。（頁面通過反覆刷新，請不要懷疑個人操做。） 由於最近作的項目對緩存要求很高，對localStorage有大量的運用，而後產生了一些奇怪的bug，才發現了這個深坑。 許多多年經驗的同事都表示歷來沒遇到過這樣詭異的bug。

又要功能強，又要兼容低，前端很差當啊。

先寫到這裏。