瀏覽器兼容性隨手記：Javascript

1.event

　　IE9如下不支持直接獲取event對象，因此須要寫兼容：

　　　　var event = event?event:window.event;

　　IE8如下不支持event.target,可是能夠經過event.srcElement來兼容:

　　　　var eventTarget = event.srcElement?event.srcElement:event.target;

2.document.getElementsByClassName("...")

　　IE8如下不支持，暫時沒有解決辦法；只能針對當前代碼作Hack

3.new Date( str )格式錯誤

　　若是str不是標準的時間格式"2014/12/9"之類的字符串，new Date會失敗並返回一個錯誤結果；

　　在Chrome下返回的是Invalid Date，在IE下返回的是NaN；

　　在作錯誤結果處理時，記得帶上NaN

4.getYear 獲取年份

　　在IE中拿到的是正常的2014,2013數值，而在Chrome等瀏覽器裏拿到的是114,113，比正常年份少了個1900；獲取完全年份應該使用getFullYear()函數，在各個瀏覽器內拿到的都是201四、2013等正常的年份數值　

5.stopPropagation 阻止冒泡

　　IE9一下不支持使用event.stopPropagation()函數，應使用event.cancelBubble = true;

　　　　var e = event?event:window.event;
　　　　if (e.stopPropagation) {
　　　　　　e.stopPropagation();
　　　　}
　　　　else{
　　　　　　e.cancelBubble = true;
　　　　}

6.setAttribute函數

　　節點能夠調用setAttribute函數來設置屬性，可是ie7如下不支持經過該函數添加：class,cellspacing,cellpadding,onclick等

　　若是直接用setAttribute,那麼在ie7中新建的節點就沒有樣式且綁定事件失效。

　　解決辦法是直接經過屬性進行賦值：(高級瀏覽器已向下兼容)

　　　　node.className = "lee_calender";

　　　　tableNode.cellSpacing = 0;

　　　　tableNode.cellPadding = 0;

　　點擊事件的話，仍是直接用addEventListener來綁定吧，可是要注意看下一條

7.addEventListener("click",function(){......})函數　　

 　　該函數在ie6,7下失效，ie6,7應使用attachEvent函數，而且綁定事件爲"onclick","onmouseover" 等

　　不妨寫一個兼容函數

　　function bindEvent(obj,eve,method){

　　　　if(obj.addEventListener){

　　　　　　obj.addEventListener(eve,method);

　　　　}

　　　　else{

　　　　　　eve = "on"+eve;

　　　　　　obj.attachEvent(eve,method);

　　　　}

　　}

　　調用時，直接bindEvent(document.getElementById("INPUT"),"click",function(){.......}); 　　

8.console.log()

　　console.log()函數在ie7,8下不能直接調用，ie7,8默認console是未初始化的

　　因此版本發佈以前記得用grunt對js文件進行壓縮，刪除這些測試時寫的console.log

9.ajax相關

　＊在ajax中，IE6如下不支持new XMLHttpRequest()。

　　兼容性的類爲new ActiveXObject("Microsoft.XMLHTTP"); 

　＊IE瀏覽器中還存在ajax緩存的問題，能夠經過如下辦法：服務端在header設置cache:no-cache;前端ajax請求是能夠在url後拼接時間戳；jQuery$.ajax中緩存可控

 10.移動端瀏覽器全屏

UC:
　　<meta name="full-screen" content="yes">
　　<meta name="browsermode" content="application">
QQ:
　　<meta name="x5-orientation" content="portrait">
　　<meta name="x5-fullscreen" content="true">
　　<meta name="x5-page-mode" content="app">

 

 

 

---遇到一些更一些，該好好記下瀏覽器兼容性及解決辦法的知識點了-----