JS兼容性问题（FF与IE）

2022-12-02 15:00:25

不同浏览器中js兼容问题大全

1.document.formName.item('itemName')问题

说明：

 //IE下（两种）

 document.formName.item("itemName");

 document.formName.elements ["elementName"];

 //Firefox下

 document.formName.elements["elementName"];

 //解决方法：

 document.formName.elements["elementName"]

2.集合类对象问题

说明：

　　IE下,可以使用()或[]获取集合类对象;

　　Firefox下,只能使用[]获取集合类对象;

解决方法:统一使用[]获取集合类对象.

3.自定义属性问题

说明：

　　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);

    }

例子（事件绑定的公共函数）：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>无标题文档</title>

 <script type="text/javascript">

 function myAddEvent(obj, sEvent, fn){  //绑定事件

     if(obj.attachEvent){

         obj.attachEvent('on'+sEvent, fn);

     }

     else{

         obj.addEventListener(sEvent, fn, false);

     }

 }

 function aaa(){

     alert('a');

 }

 function bbb(){

     alert('b');

 }

 window.onload=function (){

     var oBtn=document.getElementById('btn1');

     myAddEvent(oBtn, 'click', aaa);

     myAddEvent(oBtn, 'click', bbb);

 };

 </script>

 </head>

 <body>

 <input id="btn1" type="button" value="aaa" />

 </body>

 </html>

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>元素中。

例子：

 var row = document.createElement( "tr" );

 var cell = document.createElement( "td" );

 var cell_text = document.createTextNode( "插入的内容" );

 cell.appendChild(cell_text);

 row.appendChild(cell);

 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写个方法实现。

解决方法：

 //通过判断浏览器类型来兼容：

 if(document.all)

 document.getElementById('element').innerText = "mytext" ;

 }else{

 document.getElementById('element').textContent = "mytext" ;

 }

14.document.getElementsByClassName

说明：

　　getElementsByClassName不能兼容IE9之前的浏览器

解决办法：自己封装个函数。用getElementsByTagName

例子（以简易选项卡为例子）：

 <html>

 <head>

     <title></title>

     <script type="text/javascript">

        window.onload=function(){

             var oTab = document.getElementById('tab');

             var aLi = getByClass(oTab, 'nav')[0].getElementsByTagName('li'); //使用getByClass方法

             var aA = oTab.getElementsByTagName('ul')[0].getElementsByTagName('a');

             var aDiv = getByClass(oTab, 'box'); //使用getByClass方法

             var i = 0;

             aDiv[0].style.display = 'block';

             for(i=0; i<aLi.length; i++){

                 aLi[i].index = i;

                 aLi[i].onclick = function(){

                     for(i=0; i<aLi.length; i++){

                         aLi[i].className = '';

                         aDiv[i].style.display = 'none';

                     }

                     this.className = 'active';

                     aDiv[this.index].style.display = 'block';

                 };

                 aA[i].onfocus=function(){

                     this.blur();

                 };

             }

         };

         function getByClass(oParent, sClassName){

             var aElm=oParent.getElementsByTagName('*');

             var aArr = [];

             for(var i=0; i<aElm.length; i++){

                 if(aElm[i].className == sClassName){

                     aArr.push(aElm[i]);

                 }

             }

             return aArr;

         }

     </script>

     <style type="text/css">

         div,li,ul{padding:0; margin:0;}

         .box{display:none; height:200px; width:300px; background:#739582; border:1px solid green;}

         li{list-style:none; float:left; padding:5px 0; text-align:center; background:green; width:100px;}

     </style>

 </head>

 <body>

     <div id="tab">

         <div class="nav">

             <ul>

                 <li class="active"><a>111</a></li>

                 <li><a>222</a></li>

                 <li><a>333</a></li>

             </ul>

         </div>

         <div class="contentbox">

             <div class="box" style="display:block">111</div>

             <div class="box">222</div>

             <div class="box">333</div>

             <div class="box">444</div>

         </div>

     </div>

 </body>

 </html>

但是呢，使用jquery就简单的多啦，$('.box')就搞定啦，所以个人建议使用jquery。

浏览器不兼容真的很麻烦，但是呢，总会找到解决的方法的。

码农公寓

相关文章