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 = “值”