js兼容性
兼容性问题
Window.onclick
Window.onclick在IE8及以下没反应，
解决办法
统一用document.onclick
Window.close
在chrome下可以正常关闭
在FF下提示不允许脚本关闭非脚本打开的窗口。
IE下会出提示
创建Ajax对象
//1.创建Ajax对象
XMLHttpRequest不兼容IE6且在IE6下没有定义XMLHttpRequest
在IE6下使用ActiveXObject(“Microsoft.XMLHTTP”);
if(window.XMLHttpRequest)//如果直接写XMLHttpRequest在IE6下报错
{ //因为在IE6下没有定义XMLHttpRequest
var oAjax=newXMLHttpRequest();//不兼容IE6
}
else
{
//IE6下用ActiveXObject("Microsoft.XMLHTTP").
var oAjax=newActiveXObject('Microsoft.XMLHTTP');//只兼容IE
}
？？带宽的拖拽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div2
{
width:150px;
height:150px;
background:red;
position:absolute;
}
.box
{
border:1px dashed black;
position:absolute;
}
</style>
<script>
window.onload=function()
{
var oDiv2=document.getElementById('div2');
var oBox=document.createElement('div');
var disX;
var disY;
oDiv2.onmousedown=function(ev)
{
var oEvent=ev||event;
disX=oEvent.clientX-oDiv2.offsetLeft;
disY=oEvent.clientY-oDiv2.offsetTop
oBox.className='box';
oBox.style.width=oDiv2.offsetWidth-2+'px';
oBox.style.height=oDiv2.offsetHeight-2+'px';
oBox.style.left=oDiv2.offsetLeft+'px';
oBox.style.top=oDiv2.offsetTop+'px';
document.body.appendChild(oBox);
if(oDiv2.setCapture)
{
oDiv2.onmousemove=onmouseMove;//写oBox的时候只有chrome能动、FF和IE不能动
oDiv2.onmouseup=onmouseUp;
oDiv2.setCapture();
}
else
{
document.onmousemove=onmouseMove;
document.onmouseup=onmouseUp;
}
return false; //chrome 、FF、IE9
};
function onmouseMove(ev)
{
alert('a');
var oEventMove=ev||event;
var l=oEventMove.clientX-disX;
var r=oEventMove.clientY-disY;
oBox.style.left=l+'px';
oBox.style.top=r+'px';
};
function onmouseUp()
{
this.onmousemove=null;
oDiv2.style.left=oBox.offsetLeft+'px';
oDiv2.style.top=oBox.offsetTop+'px';
document.body.removeChild(oBox);
this.onmouseup=null;
if(this.releaseCapture)
{
this.releaseCapture();
}
};
};
</script>
</head>
<body>
<div id="div2"></div>
</body>
</html>
事件捕获(拖拽的小问题)
在IE下拖拽的时候可能出现其他内容被选中的情况
IE、FF下可以使用setCapture和releaseCapture
解决办法
使用If(oDiv.setCapture)
示例：
<script>
window.onload=function()
{
var oDiv2=document.getElementById('div2');
var disX;
var disY;
oDiv2.onmousedown=function(ev)
{
var oEvent=ev||event;
disX=oEvent.clientX-oDiv2.offsetLeft;
disY=oEvent.clientY-oDiv2.offsetTop
if(oDiv2.setCapture)
{
oDiv2.onmousemove=onmouseMove;
oDiv2.onmouseup=onmouseUp;
oDiv2.setCapture();
}
else
{
document.onmousemove=onmouseMove;
document.onmouseup=onmouseUp;
}
return false; //chrome 、FF、IE9
};
function onmouseMove(ev)
{
var oEventMove=ev||event;
var l=oEventMove.clientX-disX;
var r=oEventMove.clientY-disY;
oDiv2.style.left=l+'px';
oDiv2.style.top=r+'px';
};
function onmouseUp()
{
this.onmousemove=null;
this.onmouseup=null;
if(this.releaseCapture)
{
this.releaseCapture();
}
};
};
</script>
事件绑定/事件解除
在IE9以下浏览器绑定事件时，执行顺序和绑定相反
在IE9和chrome、FF浏览器绑定事件时，执行顺序和绑定相同
attachEvent在IE下能用但是不兼容FF和chrome
addEventListener在FF和和chrome能用，不兼容IE7
绑定 解除
attachEvent detachEvent
addEventListener removeEventListener
解决办法
//IE
if(oBtn.attachEvent)
{
oBtn.attachEvent('onclick',function(){});
}
else
{
oBtn.addEventListener('click',function(){},false);
}
event和 ev
event不兼容FF
ev不兼容IE8~8
解决办法
var oEvent=ev||event;
在firefox不兼容 ;在FF直接使用id存在问题。
<input type="checkbox"onmouseover=" div1.style.display='block';"
onmouseout=" div1.style.display='none';" />
修改位
<input type="checkbox"onmouseover="document.getElementById('div1').style.display='block';"
onmouseout="document.getElementById('div1').style.display='none';"/>
自定义属性
在ie7下能用 ie9 chrome ff下不能用。
解决办法：
不在行间加index；而在js中加如：aBtn[i].index=I;
currentStyle
currentStyle在ie下能用，chrome（低版本）和FF不能用
IE： oDiv.currentStyle.width
chrome FF: getComputedStyle(oDiv,“随便”).width
// alert(oDiv.currentStyle.width);//chromeff 不支持
//alert(getComputedStyle(oDiv,null).width) ;ie9及以上支持
解决办法
if(oDiv.currentStyle)
// oDiv.currentStyle在ie下是object 在chrome和ff下是undefined
{ //IE
alert(oDiv.currentStyle.width);
}
else
{ //chrome FF
alert(getComputedStyle(oDiv,null).width);
}
数组索引
在低版本的ie下
var str=’abcdef’;
alert(str[4]);//会提示undefined
解决方法：
使用str.charAt(4);兼容所有的浏览器
子节点
<ul>
//此处有文本节点
<li></li>
//此处有文本节点
<li></li>
//此处有文本节点
</ul>
在IE6-8中ul的节点数为2，在IE9、chrome、FF为5
节点类型nodeType
解决办法
使用nodeType
<script>
window.onload=function()
{
varoUl=document.getElementById('ul1');
// alert(oUl.childNodes.length);
for(vari=0;i<oUl.childNodes.length;i++)
{
// nodeType==3 ->是文本节点
// nodeType==1 ->是元素节点
// alert(oUl.childNodes[i].nodeType);
if(oUl.childNodes[i].nodeType==1)
{
oUl.childNodes[i].style.background='red';
}
}
}
</script>
使用children
children不包括文本节点，且兼容ie6~9、ff、chrome
父节点
<body>
<ul id="ul1">
</ul>
</body>
<script>
window.onload=function()
{
var oUl=document.getElementById('ul1');
alert(oUl.parentNode);
}
</script>
在IE89和ff、chrome下为object HTMLBodyElement
在IE7下为object
首尾节点、兄弟节点
firstChild firstElementChild
lastChild lastElementChild
nextSibling nextElementSibling
previousSibling previousElementSibling
var oUl=document.getElementById('ul1');
oUl.firstChild.style.background='red';
在IE678下能正常使用，他指的是第一个元素节点
在IE9、chrome、ff下，指的是第一个节点，有可能是文本节点
需要使用oUl.firstElementChild.style.background='red';
解决办法
在IE678 下oUl.firstElementChild为undefined
使用if分支处理
if(oUl.firstElementChild)
{
oUl.firstElementChild.style.background='red';
}
else
{
oUl.firstChild.style.background='red';
}
插入元素
<ul id="ul1"></ul>
var oUl=document.getElementById('ul1');
var oLi=document.createElement('li');
var aLi=oUl.getElementsByTagName('li');
oUl.insertBefore(oLi,aLi[0]) ;
添加第一个元素时，aLi为空，chrome和FF没有问题，但是在IE下无法成功插入
解决办法
if(aLi.length>0)
{
oUl.insertBefore(oLi,aLi[0]) ;
}
else
{
oUl.appendChild(oLi);
}
透明度
filter:alpha(opacity:30);//IE
opacity:0.3;//chrome FF
解决办法
两个都写上
滚动条
document.documentElement.scrollTop; //IE 、FF
document.body.scrollTop; //chrome
解决办法
使用||表达式
固定定位
position:fixed ;在IE6下不起作用
需要使用绝对定位