JS兼容性问题

1.AJAX

  IE:new ActiveXObject()

  FF、Chrome:new XMLHttpRequest()

  解决办法 统一封装创建XMLHttpRequest对象的方法

 1 function createXMLHttpRequest(){  
 2     var XML;  
 3     try{  
 4         //FF,Opera,Safari  
 5         XML = new XMLHttpRequest();  
 6     }catch(e){  
 7         try{  
 8             //支持IE6.0+  
 9             xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");  
10         }catch(e){  
11             try{  
12                 //支持IE5.5+  
13                 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
14             }catch(e){  
15                 alert("提示: 您的浏览器暂时不支持Ajax请求!");  
16                 return false;  
17             }  
18         }  
19     }  
20     return xmlHttp;  
21 }  

2.集合类对象的()与[]的问题

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

  Js代码 :

  document.write(document.forms("formName").src);  

  //该写法在IE下能访问到Form对象的src属性  

  解决办法:将document.forms("formName")改为 document.forms["formName"]。统一使用[]获取集合类对象。

3.event事件对象

  IE,chrome:内置event对象

  FF:没有内置event,通过事件触发函数的第一个参数引入

  注意在不同浏览器中event对象api也不同。如IE下通过event.srcElement获得事件触发HTML元素,而FF、Chrome通过event.target获得。

  解决方法:程序编写时避免,或是使用jQuery等JS类库来统一操作 

1 obj.onclick=function(ev){
2         var event = ev || event
3 }

4.innerText的使用

  FF不支持innerText,它支持textContent来实现innerText,不过textContent没有像innerText一样考虑元素的display方式,所以不完全与IE兼容。如果不用    textContent,字符串里面不包含HTML代码也可以用innerHTML代替。

  【兼容处理】

  通过判断不同浏览器做不同的处理

1 if(document.all){  
2    document.getElementById('element').innerText = "mytext";  
3 } else{  
4    document.getElementById('element').textContent = "mytext";  
5 }  

5.自定义属性问题 

  说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性,Firefox下,只能使用getAttribute()获取自定义属性。

 
  解决方法:统一通过getAttribute()获取自定义属性,不过更推荐直接通过“点”运算符访问元素属性。

6.const问题 
  说明:Firefox下,可以使用const关键字或var关键字来定义常量,IE下,只能使用var关键字来定义常量。 


  解决方法:统一使用var关键字来定义常量。

7.event.x与event.y问题 
  说明:IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,even对象有pageX,pageY属性,但是没有x,y属性。 


  解决方法:使用var x = e.x ? e.x : e.pageX; 来代替IE下的event.x或者Firefox下的e.pageX

8.innerText问题 
  说明:innerText在IE中能正常工作,但是innerText在FireFox中却不行. 需用textContent。 


  解决方法:elem.innerText = elem.textContent = “值”

 

posted on 2017-03-07 19:36  .smile  阅读(978)  评论(0编辑  收藏  举报

导航