JS兼容性问题(FF与IE)
2013-08-27 17:45
399 查看
不同浏览器中js兼容问题大全
1.document.formName.item('itemName')问题
说明:
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只能在事件发生的现场使用.
解决方法:
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
复杂点要考虑绝对位置:
7.事件监听
说明:
IE提供了attachEvent和detachEvent两个接口;
而Firefox提供 的是 addEventListener和removeEventListener两个接口;
解决方法:
例子(事件绑定的公共函数):
View Code
8.事件源的获取
说明:
在使用事件委托的时候,通过 事件源获取来判断事件到底来自哪个元素,但是,在IE 下,event对象有srcElement属性,但是 没有target属性;Firefox下,even对象有target 属性,但是没有srcElement属性。
解决方法:
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>元素中。
例子:
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写个方法实现。
解决方法:
14.document.getElementsByClassName
说明:
getElementsByClassName不能兼容IE9之前的浏览器
解决办法:自己封装个函数。用getElementsByTagName
例子(以简易选项卡为例子):
但是呢,使用jquery就简单的多啦,$('.box')就搞定啦,所以个人建议使用jquery。
浏览器不兼容真的很麻烦,但是呢,总会找到解决的方法的。
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>
View Code
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。
浏览器不兼容真的很麻烦,但是呢,总会找到解决的方法的。
相关文章推荐
- JS的IE和FF兼容性问题汇总
- Js在IE和FF兼容性问题汇总
- IE和FF兼容性问题汇总(JS)
- JS兼容性问题(FF与IE)
- web 开发【js在IE和FF下的兼容性问题】
- js在IE和FF下的兼容性问题
- JS的IE和FF兼容性问题汇总
- js在IE和FF下的兼容性问题
- JS之 DOM事件监听的兼容性问题 IE 和 FF
- js在IE和FF下的兼容性问题
- js在IE和FF下的兼容性问题
- JS的IE和FF兼容性问题的汇总小结
- JS的IE和FF兼容性问题汇总
- js在IE和FF下的兼容性问题
- JS IE和FF兼容性问题汇总
- js在IE和FF下的兼容性问题
- IE和FF在JS方面的兼容性问题
- JS兼容性问题(FF与IE)
- Js在IE和FF兼容性问题汇总【转】
- JS IE和FF兼容性问题汇总