javascript的兼容性

最新推荐文章于 2022-03-25 12:59:35 发布

weixin_30596023

最新推荐文章于 2022-03-25 12:59:35 发布

阅读量275

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/hemood/archive/2011/05/26/2057806.html

版权

javascript的浏览器兼容问题是前端开发中一直存在的一个问题，和css兼容性一样，我们在开发过程中
必须了解一些基本的兼容性处理方法，下面从以下几个方面总结下js开发常碰到的问题。

1 常用的方法兼容 2 样式访问兼容 3 DOM选取及对象引用 4 事件处理 5 其他兼容 6 浏览器判断

（注意：文中所有涉及到标签的例子，为了不使标签被编辑器翻译标签书写时都加了空格，如
< li>1< /li> ）
.getYear方法
获取日期时经常用到的方法，例如 var year = new Date().getYear(); 在ie中得到的是当前年份2011

但是在ff中式是111，

解决方法：year = year<1900?1900+year:year 或者用getFullYear方法

.Css的float属性
Js访问给定css的属性方法是：obj.style.property 但是css中个别属性和js保留字是一样的，所以在获取这些
特殊的css属性时写法不同例如获取一个对象的float属性:

ie中 Obj.style.styleFloat 火狐中: Obj.style.cssFloat

解决方法：添加浏览器判断

.访问设置class属性
class也是js的保留字，获取class的方法也有不同

ie8之前版本的ie:Obj.getAttribute(“className”);

ie8 ie9 以及火狐:Obj.getAttribute(“class”);

setAttribute方法和getAttribute的方式一样

解决方法：先判断浏览器或者使用obj.className直接设置

.对象高宽问题

火狐中如果将一个对象的height属性值赋给另一个对象的height样式，obj.style.height=imgObj.height这种写法是无法识别的，这个问题在使用对象的clientHeight和clientWidth属性时也会遇到

解决方法：obj.style.height=imgobj.height+”px” 在给样式赋值时后面加上px

.集合对象访问
Ie下可以使用()或[]获取集合类对象，火狐只能用[]

Alert(document.forms(“formName”)) 火狐无法识别，

Alert(document.forms[“formName”]) 都可以识别，处理方式：使用[]获取

.Iframe引用
ie可以通过id或者name访问这个iframe的window对象，但是火狐只能通过name访问，

解决方法：统一用name获取iframe对象或者使用document.getElementById(“frameId”)获取

例如 alert(window.fr2); //火狐得不到 alert(window.fr1); //都能得到

.获取父节点
ie中支持parentElement和parentNode，火狐中只能用parentNode获取。

解决方法：统一用parentNode获取，obj.parentNode

.childNodes获取子节点
< ul id="ul" >
< li>1< /li>
< li>2< /li>
< li>3< /li>< /ul>

火狐得到长度是7 ie是3

解决方法：使用jQuery或者在通过nodeName==“#text”在循环
中把文本节点剔除如下：
var ch=document.getElementById("ul").childNodes;
for(i= 0;i.if(ch[i].nodeName=="#text"){
if(ch[i].nodeName=="#text"){
alert("文本节点");continue;
}
alert("每一个li节点我会弹出一次");
}
.节点操作removeChild和removeNode
removeNode()参数为false或者true

false：只删除本身

true：删除本身以及下属节点

在火狐中没有removeNode方法，只能通过removeChild方法代替

解决方法：用removeChild实现删除节点的效果

或者用jQuery的方法如下
< ul id="ul" >
< li>1< /li>
< li>2< /li>
< li>3< /li>< /ul>

var ul= document.getElementById("ul");
ul.removeNode(true);//ie删除方法
ul.parentNode.removeChild(ul);//火狐删除方法

.innerText的用法
innerText获取节点内的文本吗，ie中正常，火狐中不识别火狐中使用的是textContent

解决方法：判断浏览器或者使用jQuery

.Window.event事件对象，ie中可以获取，火狐中无法获取
Function test1(){

alert(event);//ie存在火狐不存在

}

Function test2(ev){

alert(ev);//ie存在火狐存在

}

解决方法：传递event参数给调用的方法，如下
< input type="button" value="test" οnclick="testEvent(event)" / >
function testEvent(eventTa){
var e = eventTa||window.event;
var srcElement= e.srcElement||e.target;
}

其中e.srcElement是id获取事件源对象，e.target是火狐获取事件源对象varsrcElement=e.srcElement||e.target;是兼容写法

.offsetX offsetY
获取鼠标当前坐标，包含滚动火狐不支持

解决方法：

用layerX和layerY替代，效果一样

.Event.X和event.Y
获取鼠标当前坐标，不包含滚动火狐不支持

解决方法：

用pageX和pageY代替

.捕获键盘值
ie中event.keyCode获取火狐中用event.which获取

如下：

function testEvent(eventTa){

//获取时间对象

vare = eventTa||window.event;