JS兼容性問題（FF與IE）

時間 2019-11-20

原文原文鏈接

不一樣瀏覽器中js兼容問題大全javascript

1.document.formName.item('itemName')問題css

說明：html

1 //IE下（兩種）
2 document.formName.item("itemName");
3 document.formName.elements ["elementName"];
4 //Firefox下
5 document.formName.elements["elementName"];
6 //解決方法：
7 document.formName.elements["elementName"]

2.集合類對象問題java

說明：node

　　IE下,可使用()或[]獲取集合類對象;jquery

　　Firefox下,只能使用[]獲取集合類對象;瀏覽器

解決方法:統一使用[]獲取集合類對象.app

3.自定義屬性問題dom

說明：ide

　　IE下,可使用獲取常規屬性的方法來獲取自定義屬性,也可使用getAttribute()獲取自定義屬性;

　　Firefox下,只能使用getAttribute()獲取自定義屬性.

解決方法：統一經過getAttribute()獲取自定義屬性.

4.eval("idName")問題

說明：

　　IE下,可使用eval("idName")或getElementById("idName")來取得id爲idName的HTML對象;

　　Firefox下只能使用getElementById("idName")來取得id爲idName的HTML對象；

解決方法：統一用getElementById("idName")來取得id爲idName的HTML對象.

5.window.event問題

說明：

　　window.event只能在IE下運行,而不能在Firefox下運行,這是由於Firefox的event只能在事件發生的現場使用.

解決方法：

document.onmousemove=function (ev){
    var oDiv=document.getElementById('div1');
    
    var oEvent=ev||event;
    
    oDiv.style.left=oEvent.clientX+'px';
    oDiv.style.top=oEvent.clientY+'px';
}

6.event.x與event.y問題

說明：

　　用IE下,even對象有x,y屬性,可是沒有pageX,pageY屬性;

　　Firefox下,even對象有pageX,pageY屬性,可是沒有x,y屬性；

解決方法：

　　使用mX(mX = event.x ? event.x : event.pageX;)來代替IE下的event.x或者Firefox下的event.pageX

複雜點要考慮絕對位置：

 function getAbsPoint(e){
    var x = e.offsetLeft, y = e.offsetTop;
    while (e = e.offsetParent) {
        x += e.offsetLeft;
        y += e.offsetTop;
    }
    alert( " x: " + x + " , " + " y: " + y);
}

7.事件監聽

說明：

　　IE提供了attachEvent和detachEvent兩個接口；

　　而Firefox提供的是 addEventListener和removeEventListener兩個接口；

解決方法：

if(oBtn.attachEvent){
        oBtn.attachEvent('onclick', aaa);
        oBtn.attachEvent('onclick', bbb);
    }
    else{
        oBtn.addEventListener('click', aaa, false);
        oBtn.addEventListener('click', bbb, false);
    }

例子（事件綁定的公共函數）：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>無標題文檔</title>
 6 <script type="text/javascript">
 7 function myAddEvent(obj, sEvent, fn){  //綁定事件
 8     if(obj.attachEvent){
 9         obj.attachEvent('on'+sEvent, fn);
10     }
11     else{
12         obj.addEventListener(sEvent, fn, false);
13     }
14 }
15 
16 function aaa(){
17     alert('a');
18 }
19 
20 function bbb(){
21     alert('b');
22 }
23 
24 window.onload=function (){
25     var oBtn=document.getElementById('btn1');
26     
27     myAddEvent(oBtn, 'click', aaa);
28     myAddEvent(oBtn, 'click', bbb);
29 };
30 </script>
31 </head>
32 
33 <body>
34 <input id="btn1" type="button" value="aaa" />
35 </body>
36 </html>

View Code

8.事件源的獲取

說明：

　　在使用事件委託的時候，經過事件源獲取來判斷事件到底來自哪一個元素，可是，在IE　　　　　下，event對象有srcElement屬性，可是沒有target屬性；Firefox下，even對象有target　　屬性，可是沒有srcElement屬性。

解決方法：

ele = function (evt){ // 捕獲當前事件做用的對象
evt = evt || window.event;
　　return
 　　 (obj=event.srcElement?event.srcElement:event.target; );
}

dom方法及對象引用

9.frame的引用

說明：

　　IE能夠經過id或者name訪問這個frame對應的window對象，而Firefox只能夠經過 name來訪問這個frame對應的window對象；

解決方法：

　　使用frame的name來訪問frame對象，另外，在IE和Firefox中均可以使用 window.document.getElementById(」frameId」)來訪問這個frame對象。

10.parentElement

說明：

　　IE中支持使用parentElement和parentNode獲取父節點。而 Firefox只可使用parentNode。

解決方法：

　　由於firefox支持DOM，所以統一使用 parentNode來訪問父節點。

11.table操做

說明：

　　IE下 table中不管是用innerHTML仍是appendChild插入<tr>都沒有效果，而其餘瀏覽器卻顯示正常。

解決方法：

　　解決的方法是，將<tr>加到table的<tbody>元素中。

例子：

1 var row = document.createElement( "tr" );
2 var cell = document.createElement( "td" );
3 var cell_text = document.createTextNode( "插入的內容" );
4 cell.appendChild(cell_text);
5 row.appendChild(cell);
6 document.getElementsByTagName( "tbody" )[0].appendChild(row);

12.移除節點removeNode()和removeChild()

說明：

　　appendNode在IE和Firefox下都能正常使用，可是removeNode只能在IE下用。

　　removeNode方法的功能是刪除一個節點，語法爲node.removeNode（false）或者　　node.removeNode（true），返回值是被刪除的節點。

　　removeNode（false）表示僅僅刪除指定節點，然後這個節點的原孩子節點提高爲原雙親節點的孩子節點。

　　removeNode（true）表示刪除指定節點及其全部下屬節點。被刪除的節點成爲了孤立節點，再也不具備有孩子節點和雙親節點。

解決方法：

　　Firefox中節點沒有removeNode方法，只能用 removeChild方法代替，先回到父節點，在從父節點上移除要移除的節點。

node.parentNode.removeChild(node);

// 爲了在ie和firefox下都能正常使用，取上一層的父結點，而後remove。

13.innerText與textContent

說明：

　　Firefox不支持innerText，它支持textContent來實現innerText，不過textContent沒有　　像 innerText同樣考慮元素的display方式，因此不徹底與IE兼容。若是不用textContent，　　字符串裏面不包含HTML代碼也能夠用 innerHTML代替。也能夠用js寫個方法實現。

解決方法：

1 //經過判斷瀏覽器類型來兼容：
2 if(document.all)
3 document.getElementById('element').innerText = "mytext" ;
4 }else{
5 document.getElementById('element').textContent = "mytext" ;
6 }

14.document.getElementsByClassName

說明：

　　getElementsByClassName不能兼容IE9以前的瀏覽器

解決辦法：本身封裝個函數。用getElementsByTagName

例子（以簡易選項卡爲例子）：

 1 <html>
 2 <head>
 3     <title></title>
 4     <script type="text/javascript">
 5        window.onload=function(){
 6             var oTab = document.getElementById('tab');
 7             var aLi = getByClass(oTab, 'nav')[0].getElementsByTagName('li'); //使用getByClass方法
 8             var aA = oTab.getElementsByTagName('ul')[0].getElementsByTagName('a');
 9             var aDiv = getByClass(oTab, 'box'); //使用getByClass方法
10             var i = 0;
11             
12             aDiv[0].style.display = 'block';
13             
14             for(i=0; i<aLi.length; i++){
15                 aLi[i].index = i;
16                 aLi[i].onclick = function(){
17                     for(i=0; i<aLi.length; i++){
18                         aLi[i].className = '';
19                         aDiv[i].style.display = 'none';
20                     }
21                     this.className = 'active';
22                     aDiv[this.index].style.display = 'block';
23                 };
24                 aA[i].onfocus=function(){
25                     this.blur();
26                 };
27             }
28         };
29         function getByClass(oParent, sClassName){
30             var aElm=oParent.getElementsByTagName('*');
31             var aArr = [];
32             for(var i=0; i<aElm.length; i++){
33                 if(aElm[i].className == sClassName){
34                     aArr.push(aElm[i]);
35                 }
36             }
37             return aArr;
38         }
39     </script>
40     <style type="text/css">
41         div,li,ul{padding:0; margin:0;}
42         .box{display:none; height:200px; width:300px; background:#739582; border:1px solid green;}
43         li{list-style:none; float:left; padding:5px 0; text-align:center; background:green; width:100px;}
44     </style>
45 </head>
46 <body>
47     <div id="tab">
48         <div class="nav">
49             <ul>
50                 <li class="active"><a>111</a></li>
51                 <li><a>222</a></li>
52                 <li><a>333</a></li>
53             </ul>
54         </div>
55         <div class="contentbox">
56             <div class="box" style="display:block">111</div>
57             <div class="box">222</div>
58             <div class="box">333</div>
59             <div class="box">444</div>
60         </div>
61     </div>
62 </body>
63 </html>

可是呢，使用jquery就簡單的多啦，$('.box')就搞定啦，因此我的建議使用jquery。

瀏覽器不兼容真的很麻煩，可是呢，總會找到解決的方法的。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。